CSS word-break 속성

1 개요[ | ]

CSS word-break property
CSS word-break 속성

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

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

2 예시[ | ]

<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>

3 같이 보기[ | ]

4 참고[ | ]