Computer/CSS

자동 개행

알찬돌삐 2012. 8. 10. 16:30

 

word-wrap: break-word; /* Internet Explorer 5.5+ */
     white-space: pre-wrap; /* css-3 */
     white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
     white-space: -pre-wrap; /* Opera 4-6 */
     white-space: -o-pre-wrap; /* Opera 7 */ 
     word-break:break-all;

 

 

 

 

FF억지춘향 줄바꿈 

/ Dev

html에서 한 문장의 줄이 길어지면 보통은 자동으로 줄바꿈해주지 않는다.
IE(5.5부터인가?)의 경우는 css에 "word-wrap:break-word;"를 써주면 조금 어색한 곳이라도 무조건 줄바꿈시켜준다.
문제는 Firefox!! 여차저차 정치적이고 알록달록한 이유로 현재 "word-wrap"스타일은 IE만 먹는다.

FF 의 경우는 한글을 2바이트로, 영문을 1바이트로 글자 수를 계산하면 내가 원하는 한 줄에는 대략 몇 바이트가 들어가는지 계산이 나온다. 그 한 줄에 해당하는 바이트가 될 때마다 글자 끝에 "​​"를 붙이면 자동으로 줄바꿈이된다.("​​"이 나올 때 마다 줄바꿈을 해야하는지 아닌지를 판단한다)
이 엔티티는 레이아웃상으로 전혀 드러나지 않는 엔티티이므로 마음껏 써도 된다.

"​​"는 태국어에서 쓰는 너비 없는 단어 구분자라고 하던데 이런게 왜 태국어에 있는지는 모르겠지만 여튼 그 덕분에 FF에서도 줄바꿈이 가능해졌다.

이 글은 스프링노트에서 작성되었습니다.

.

'Computer > CSS' 카테고리의 다른 글

CSS로 말줄임 효과내기  (0) 2015.02.26
IE10에서 네이버 스마트 에디터 자바스크립트 오류  (2) 2013.05.13
CSS Hack  (0) 2012.08.10
디자인 템플릿  (0) 2012.08.10
[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012.01.19