[CSS] 텍스트 줄바꿈 처리 word-break, white-space > HTML,CSS,레이아웃

본문 바로가기

검색취소

[CSS] 텍스트 줄바꿈 처리 word-break, white-space

검색 이전 다음 목록

본문

작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다.

word-break


word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다.



단어의 중간에서 줄바꿈이 되는 효과입니다. 이 것의 반대 속성은 nowrap, keep-all 등을 주면 된다는데 제가 실험해본 결과 잘 안되는 것 같습니다. 그래서 이번에 같이 소개할 white-space 를 사용하시면 됩니다.

white-space


white-space는 여러가지 값이 있는데, 정리를 해보자면 이렇습니다.

inherit  말그대로 상속 받는 것
normal  일반적인 것, default
nowrap  줄바꿈을 하지 않는다
pre  <pre>태그와 같은 기능, 마크업에서 앤터로 줄바꿈 한것 만 적용이 되고 넘어가는 것에는 줄바꿈 하지 않는다
pre-line  마크업에서 줄바꿈 한 것이 적용 되면서 width를 넘어가는 텍스트도 자동으로 줄바꿈이 된다
pre-wrap  pre-line 과 비슷

말로 길게 설명해 무엇합니까? 그렇다면 눈으로 확인해 봅시다.

HTML 마크업은 다음과 같이 했습니다. 줄바꿈은 왼쪽에 보이는 라인넘버에서 알 수 있듯이 2번 하였습니다. 다시말해 단락이 3개라는 뜻 입니다. 스타일은  넓이를 400px 을 주고 사방으로 padding 을 10px 씩 주었습니다.


일반적으로 랜더링하면 단어 단위로 줄바꿈이 된 형태로 나오게 되는데 여기에서 속서을 하나씩 주면 기능을 한 눈에 알 수 있습니다.

우선 inherit 은 상속되는 것이므로 넘어가고 (IE8에는 인식을 못한다고 합니다.) normal 은 기본인데 Original 과 동일하다고 보시면 됩니다. nowrap 속성을 주게되면 줄바꿈이 되지 않습니다.


그리고 pre 속성은 <pre> 태그와 동일한 역할을 합니다. 마크업에서 줄바꿈 (앤터) 해준 것을 적용해주는 것인데요, 여기서는 두번 줄바꿈을 하였기 때문에 3 단락으로 나뉘어져 있습니다. 그리고 width 를 넘어가는 텍스틑는 줄바꿈이 되지 않습니다.


다음으로 pre-line 속성을 주게되면 pre를 준 것과 같이 마크업에서 줄바꿈 한 부분에서도 줄바꿈이 되고, width 값을 넘어가는 부분에 대하여 줄바꿈이 됩니다.


per-wrap 속성을 주면 pre-line 을 적용해준 것과 동일한 결과가 나오는데 구체적인 차이는 잘 모르겠습니다. 자세한 내용은 w3cschool 을 참조해 보시는 것이 더 좋을 듯 합니다.


추천 0

등록된 댓글이 없습니다.

검색취소

HTML,CSS,레이아웃

검색
  • no image
  • CSS : 반응형 웹(Responsive Web)

     CSS : 반응형 웹(Responsive Web)Posted by 서 지수 in 배움터 - 열공on Mar 31st, 2014태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많…

  • no image
  • CSS 글 자간 줄간 설정방법

    CSS 글 자간 줄간 설정방법 글 꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가…

  • #5cf039 헥스 색상 코드
  • #5cf039 헥스 색상 코드

    첨부파일

    #5cf039 정보 반전#a30fc625% 포화도#52ff2a그레이스케일#949494 25% 밝게#94f57e원본#5cf03925% 어둡게#34cf0f lawngreen#7cfc0025% 포화도 저하#6ad94f웹 …

  • CSS 레이아웃... Copy & Paste
  • CSS 레이아웃... Copy & Paste

    첨부파일

    오랜만에 그냥 팁 하나! CSS 레이아웃이 익숙치 않은 나 같은 분을 위한 친절한 사이트.. Copy & Paste를 해도 걱정 없다.Dynamic Drive CSS Layouts via Ajaxian 덤으로 왼쪽 …

  • XHTML+CSS 레이아웃 디자인 예제
  • XHTML CSS 레이아웃 디자인 예제

    첨부파일

    XHTML과 CSS로 레이아웃 디자인을 할 때 많이 쓰이는 레이아웃 디자인 템플릿을 모아둔 싸이트가 있다.http://www.intensivstation.ch/en/templates/일반적으로 사용되는 웬만한 레이아…

  • CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기
  • CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기

    *예전에 작성했던 강좌의 마지막 부분입니다. CSS를 통해 이전 강좌에서 작성한 마크업에 모양새를 입히기 전에 한 번 복습 하는 의미로 참고하면 좋겠네요 float 속성이번 시간에는 css를 통해 레이아우팅을 할 때…

?>