메뉴 건너뛰기

프로그램언어

?

단축키

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 HTML 특수문자 / 띄어쓰기,공백, 따옴표 2023.01.27 2201
21 input 속성 readonly, disabled 차이점 file 2023.01.27 96
20 Input 태그 한글, 영문모드 전환 2023.01.12 250
19 MSword : 인쇄 미리보기-한페이지씩 보이기 2021.03.26 303
18 map태그에서 window.open() 쓰기 2021.03.26 202
17 input태그 tab 순서 설정 : tabindex 2021.03.26 358
16 인라인 자동완성 기능 막기 2021.03.25 131
15 javascript로 alt 또는 title 달때 내용에 포함된 따옴표 치환하기 2021.03.25 167
14 HTML - Form 태그, Input 태그 자동완성 해제하기 2021.03.09 153
» CSS - p태그 등 너무 긴 문자열이 존재할 때, 넓이에 따른 자동 줄바꿈 file 2021.03.09 594
12 HTML - Table td안에 특수문자(")가 존재할 경우 넓이 초과 현상 file 2021.03.09 248
11 HTML, CSS - 헤더컬럼 고정형 table 구성하기 file 2021.03.09 739
10 크롬 알림처럼 띄워보기 file 2019.04.29 846
9 네이버 웹마스터도구 메타태그 2019.04.29 790
8 div iframe 퍼센트 높이조절 문제 해결(div, iframe height 100%) file 2019.03.05 1005
7 input 자동완성 끄기 HTML file 2019.02.19 1092
6 테이블 대신 필드셋(fieldset) 이용 2019.01.16 2122
5 FCKeditor 2.6.x 버전 IE9에서의 Dialog 버그 수정 2018.10.27 1168
4 form안의 button submit 동작 막기 2018.08.24 1725
3 viewport meta 태그를 이용해 모바일 브라우저상에서 레이아웃 조종하는 법 file 2017.04.14 6865
Board Pagination Prev 1 2 Next
/ 2

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved