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

댓글을 달아 주세요

  1. BlogIcon azki 2008.01.02 10:40  댓글주소  수정/삭제  댓글쓰기

    요점은 이거군요
    -------------------
    중간중간 space값을 넣을때 바로 0px의 문자열을 넣는 것이죠.
    aaaaaaa<i style="font-size:0px;"> </i>aaaaaaa<i style="font-size:0px;> </font> .....
    -------------------
    꽁수 감사합니다
    근대 div 나 기타 html document 에서 문자열이 layout 구조를 뚫고 나오는 경우는 overflow 문제 같아요 (overflow: hidden) word-break 되더라도 수직방향으로 뚫고 나오니까요..

    • BlogIcon Rhio.kim 2008.01.02 13:24 신고  댓글주소  수정/삭제

      css 의 overflow property는 본래 해당 element의 content 가 넘치는 경우(위에 서 말하면 layout 을 뚫고 나오거나 설정한 size property를 변형시키는)에 구조를 흐트러지지 않게 하기 위한 속성이죠! ( w3schools.com 참조 )

      문제라기 보다는 overflow로 그 layout이 흐트러지는 것을 방지할 수 있죠.

  2. BlogIcon 김민중 2008.01.02 11:13  댓글주소  수정/삭제  댓글쓰기

    안녕하세요^^ 지나가다 관심이 있어 글 보고 갑니다^^
    예제를 실행 해보려고 하니 bytelen 함수가 없어 에러가 나네요
    String prototype에 구현되어 있는 함수 같은데 어떤식으로 구현되어 있는지요^^
    좋은 자료 감사합니다

  3. BlogIcon 옷장수 2008.01.03 19:46 신고  댓글주소  수정/삭제  댓글쓰기

    Rhio님의 재미있는 포스팅 잘 읽었습니다. ^^
    개인적인 생각으로는 overflow:hidden;이 가장 답이 아닐까 생각되네요. 서버단에서 문자열은 보통 잘라져서 넘어오는데 특정 문자들 '─'가 죽 이어져서 넘어오는 경우 처리가 안되는 난감한 문제도 많은 것 같구요.

    만약, 자간만 알면... 크기 비교해서 집어넣어주는 것도 좋을 것 같아요 ^^;;;;

    좋은 하루 되세요~

    • BlogIcon Rhio.kim 2008.01.04 11:22 신고  댓글주소  수정/삭제

      옷장수님 새해 인사가 늦었네요.. ^^;
      새해 복 많이 받으세요...

      국내 포털을 보니 대부분 overflow:hidden; 으로 처리가 되어있더라구요..(다음카페, 네이버 카페, 검색)

      하지만 국외 서비스에 한하여 (youtube)의 경우는 일정간격으로 띄어쓰기를 강제적으로 입력하여 표현을 하더라구요. 다른 사이트는 테스트 해보지 않았지만. 국외의 경우 일본어의 경우 띄어쓰기 없이 조금 긴 문장들이 있습니다. 만약 카테고리 같은 좁은 영역에 의미있는 내용을 집어 넣어야할 때 문제가 발생하게 되는 문제가 발생해서 이런 처리를 생각하게 됐답니다.

      저도 그냥 overflow 값으러 처리하려 했었으나.. ^^

    • BlogIcon 기다림 2008.01.29 17:24  댓글주소  수정/삭제

      overflow:hidden 이 답안이라고 할 수 없습니다.
      왜냐면 content가 짤려보여서 layout을 안망가트리기 때문입니다.

      웹은 정보를 나누는것이 목적이고 그것을 어떻게 보여주느냐는 차후의 문제입니다.
      그런데 언제부터인지 갑과을이 바뀌어서 부여주는것을 중요시하고 content는 차후가 되버리더군요.

      간단하게 말하자면,
      content가 짤려져서 올바른 정보를 전달하지 못하게 되기 때문에..이건 (개인적으로)아주 잘못된 방법이라고 생각합니다.
      물런 메인페이지 같은곳에서 맛보기정보를 보여주는 곳이라면 overflow를 주고 "..." 라는 more의 느낌이 나도록 해준다면 상관없겠죠.

      암튼 FF.. 가끔 이런식으로 대박 실망 시킨다니깐요 ㅡ,.ㅡ;

  4. BlogIcon Rhio.kim 2008.01.29 19:14 신고  댓글주소  수정/삭제  댓글쓰기

    기다림님과 비슷한생각..
    좋은 말씀 감사합니다.. ^^

  5. BlogIcon zeple 2008.12.04 11:42  댓글주소  수정/삭제  댓글쓰기

    좋은 정보지만.. 이 방법도 문제가 있습니다.
    만약 게시물에 HTML 태그가 들어가게 된다면..
    이미지를 표현하는 태그가 내용에 존재하게 된다면.. 태그내용중에 공백이 들어갈 요지가 생겨서 엑박이 뜰 수 있습니다.

    • BlogIcon Rhio.kim 2008.12.21 14:34 신고  댓글주소  수정/삭제

      사용자 입력에 대하여 태그를 허용하는 서비스에서는 문제가 생기겠네요. ^^

      위의 팁은 일반적으로 태그를 허용하지 않는 곳에서 활용하시면 되겠네요. (모든 문제점을 해결하려면 골치 아파요 ^^;;)