Rev. 2.73

break-word.gif
동적으로 생산되는 HTML에 CSS를 입히는 과정에서 문자가 자동으로 줄바꿈되지 않는 경험을 한 적이 있나요? 저는 한 때 이러한 현상에 대한 해결방법을 찾지 못해 overflow속성을 이용하여 모양이 흐트러지지 않도록 하는 등의 삽질을 했던 기억이 있습니다. Nick La씨는 이 문제를 시원하게 해결할 수 있는 방법을 정리하여 개시했네요. 위 그림처럼 숫자나 영문에 뛰어쓰기 없이 붙여쓰여진 문자는 요소의 너비를 무시하고 다음 공백이 나타날 때 까지 줄바꿈되지 않습니다. 이러한 현상을 방지하는 CSS 속성이 있습니다. 바로 word-wrap속성입니다. IE 5.5 이상, 파이어폭스 3.5 이상, 사파리, 크롬 등 모든 브라우저에 이 속성을 적용할 수 있습니다.

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

Comments

Got something to add? You can just leave a comment.

  • amk amk

    Word-Wrap 속성을 이용하여 강제로 줄바꿈하기 http://j.mp/aJ50q1 good tip

    from Topsy

  • 참고로 ie에서만 사용할 수 있는 속성인데요, word-break:break-all; 이란 속성으로도 같은 ㅎ과를 낼 수 있습니다. 비교해보면 같은 IE내에서도 word-break, break-word 를 적용할 때 줄바꿈 되는게 약간씩 틀리더라구요 ㅎㅎ
    원래는 파폭에서 안되서 문제가 많았는데, 3.5부터 지원하기 시작해서 참 다행입니다 ;ㅅ;

    reply edit

  • 따갭 따갭

    파폭 때문에 골치 아팠는데; 검색하다가 발견했네요.~ 유용한 정보 감사합니다.ㅠ /

    reply edit

  • 포토샵혁명방송 포토샵혁명방송

    이 문제를 해결 못하고 있던 참에 이렇게 좋은곳에서 해결방법을 찾게 되어 기쁘고요
    속시원히 해결되어서 정말정말 좋네요. 감사합니다.^^

    reply edit

Your Reaction Time!

captcha

avatar