메뉴 건너뛰기

프로그램언어

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

입력폼에 컨텐츠에 해당하는 내용을 적도록 할때 textarea 또는 에디터 툴을 적용하여 장문을 지원하는데, 이때 사용자가 엔터와 같은 개행문자를 입력하지 않고, 연속되게 이어서 입력하게되면 나중에 데이터를 받아와서 parsing시 그냥 한줄로 쭉 들어와서 정상적으로 노출되지 않는 현상이 존재한다.

 

이 때, CSS의 word-wrap옵션을 통해 처리가 가능하다.

 

 

word-wrap

word-wrap:break-word;

 

적용전 문제가 되는 모습

 

개행이 없다보니 그대로 넣게되면 깨지는 현상을 볼 수 있다.

 

 

word-wrap: break-word;적용

.contents p {word-wrap: break-word;}

 

적용 후에는 넓이값에 도달하면 알아서 줄바꿈이 일어난다.

 

 

norma옵션도 존재하는데, 이 경우에는 기존처럼 문자열이 뚫고 나온다.


List of Articles
번호 제목 날짜 조회 수
22 특수문자, 특수문자표, 특수문자 하트, 예쁜 특수문자 2016.12.06 43887
21 viewport 정리 2017.04.14 3502
20 viewport meta 태그를 이용해 모바일 브라우저상에서 레이아웃 조종하는 법 file 2017.04.14 6865
19 form안의 button submit 동작 막기 2018.08.24 1723
18 FCKeditor 2.6.x 버전 IE9에서의 Dialog 버그 수정 2018.10.27 1166
17 테이블 대신 필드셋(fieldset) 이용 2019.01.16 2122
16 input 자동완성 끄기 HTML file 2019.02.19 1090
15 div iframe 퍼센트 높이조절 문제 해결(div, iframe height 100%) file 2019.03.05 1003
14 네이버 웹마스터도구 메타태그 2019.04.29 787
13 크롬 알림처럼 띄워보기 file 2019.04.29 845
12 HTML, CSS - 헤더컬럼 고정형 table 구성하기 file 2021.03.09 737
11 HTML - Table td안에 특수문자(")가 존재할 경우 넓이 초과 현상 file 2021.03.09 247
» CSS - p태그 등 너무 긴 문자열이 존재할 때, 넓이에 따른 자동 줄바꿈 file 2021.03.09 590
9 HTML - Form 태그, Input 태그 자동완성 해제하기 2021.03.09 152
8 javascript로 alt 또는 title 달때 내용에 포함된 따옴표 치환하기 2021.03.25 166
7 인라인 자동완성 기능 막기 2021.03.25 130
6 input태그 tab 순서 설정 : tabindex 2021.03.26 357
5 map태그에서 window.open() 쓰기 2021.03.26 201
4 MSword : 인쇄 미리보기-한페이지씩 보이기 2021.03.26 301
3 Input 태그 한글, 영문모드 전환 2023.01.12 248
Board Pagination Prev 1 2 Next
/ 2

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved