CSS word-break 속성

개요

CSS word-break property

CSS word-break 속성

• 단어 내부에서 줄바꿈할 것인지를 지정하는 CSS 속성

값	설명
normal	기본 줄바꿈 규칙에 따름 ( 기본값. 영어는 붙여쓰고 CJK는 줄바꿈 )
keep-all	모두 줄바꾸지 않음 ( 한글도 붙여씀 )
break-all	모두 줄바꿈 ( 영어도 줄바꿈 )
break-word	가능한 한 단어 단위로 줄바꿈, 단어 단위가 지나치게 긴 경우 중간에서 줄바꿈시킴 ( 한글, 영어 공통 )

예시

<style>
p { width: 120px; background: yellow; border: 1px solid red; }
</style>

<p style='word-break: normal'>
Let's say Supercalifragilisticexpialidocious!
말해보자, 수퍼캘리프래질리스틱익스피얄리도셔스!
????????????????????????????????????????
</p>
<p style='word-break: keep-all'>
Let's say Supercalifragilisticexpialidocious!
말해보자, 수퍼캘리프래질리스틱익스피얄리도셔스!
????????????????????????????????????????
</p>
<p style='word-break: break-all'>
Let's say Supercalifragilisticexpialidocious!
말해보자, 수퍼캘리프래질리스틱익스피얄리도셔스!
????????????????????????????????????????
</p>
<p style='word-break: break-word'>
Let's say Supercalifragilisticexpialidocious!
말해보자, 수퍼캘리프래질리스틱익스피얄리도셔스!
????????????????????????????????????????
</p>

같이 보기

• CSS white-space 속성 ★
• CSS word-wrap 속성
• HTML wbr 태그
• 수퍼캘리프래질리스틱익스피얄리도셔스

참고

• http://www.w3schools.com/cssref/css3_pr_word-break.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/word-break