Dynamic Word Break!!  크로스브라우징 word-break, word break

사용자 삽입 이미지






우리는 간혼 이렇게 div 나 기타 html document 에서 문자열이 layout 구조를 뚫고 나오는 경우를
종종 봅니다.

IE의 경우에는 css로 이 부분을 유연하게 처리할 수 있습니다. 하지만 기타 다른 브라우저에서는 특별한 해결책이 아직은 없는거 같습니다.



제가 제시하는 해결 방법은 각 문자마다 일정의 띄어쓰기를 넣는 방식입니다.
white space를 일정 간격 혹은 자간 사이에 입력하므로써 브라우저에서 자동으로 Word-Break를 하게 됩니다.

즉 위의 이미지를 보면 div는 width:200px 입니다.
길게 늘여진 aaa.......aaa 문자열 각 사이에 white space인 space 값을 강제적으로 입력해 넣습니다.

aaaaaaa aaaaaaa aaaaaaa aaaaaaa  ....

이런식으로 넣게 되면 브라우저에서는 자동으로 Word-Break 하게 됩니다. 역시 크로스 브라우징도 가능하게 됩니다.   다만 여기에도 문제가 있습니다.

"i'mastudent' 이라는 문장을 입력하였다면 몇자 간격으로 띄어쓰기를 하느냐에 따라서 의미 전달이 달라질 수 있기 때문입니다.  또한 쓸모없이 중간 중간 띄어쓰기가 있다면 유연한 문장이 되지 않거나 보기 싫게 됩니다.

4byte 단위로 쪼갠다면 i'ma stud ent 가 되겠죠.  사실 저렇게 쓰는 사용자들은 거의 없겠죠.
하지만 경우에 따라 제목에 원치 않는 긴 제목을 'ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ' 이렇게 넣는
경우가 있죠. 

여기서 고안해낸것인데요.  중간중간 space값을 넣을때 바로 0px의 문자열을 넣는 것이죠.
aaaaaaa<i style="font-size:0px;"> </i>aaaaaaa<i style="font-size:0px;> </font> .....



이렇게 좀더 쉽게 만들었습니다.

요약
목표 : 크로스브라우징 word-break 이 가능하도록 javascript 동적 컨트롤
문제 : IE에서는 css를 통하여 word-break 가 가능하지만 그외 브라우저에서는 word-break가 되지 않는다.
고안 : div를 뚫거나 기본 layout 을 변형 시키는 긴 문자열에 일정 간경 혹은 word-break할 단위마다
         띄어쓰기를 강제적으로 넣어줄 경우 모든 브라우저에서 어떤 컨트롤 없이 word-break가 이루어진다.
         하지만 강제적인 띄어쓰기(white space)를 넣을 경우 부자연스러운 띄어쓰기로 원 문자열의 의미가
         없어지고 문자열의 규칙적인 띄어쓰기가 보는 사람들에게는 불편할 수 있다.

결론 : word-break를 해야하는 긴 문자열에 강제적으로 띄어쓰기를 입력하되 띄어쓰기할 문자(white space)는         0px 사이즈의 문자열로 한다.


이것은 직접 사용해본 예제입니다. 

document가 onload가 되면 document 에서 name으로 word-break 엘리먼트를 찾아서
한번에 위의 예제처럼 사용하시면 가장 좋을 것 같구요.

그외에 일부분만 word-break해야한다 하면 wordBreak 메서드를 활용해

    '문자열'.wordBreak();

처럼 사용하시는게 좋겠네요.
신고
Posted by Rhio.kim