[css] word-break 줄바꿈 설정

word-break는 글이 길어질 때 줄 바꿈 설정을 하는 속성이다.

⭐ 단어를 담고 있는 요소에 width, height 값이 설정 되어 있어야 가능하다. ⭐

종류

• normal : 기본 값으로 정해진 규칙에 따라 줄바꿈을 한다.
• break-all : 문자를 강제로 줄바꿈 시킨다.
  • 아시아 언어를 사용할 때는 normal 처럼 사용되며, 비 아시아 언어를 사용할 때는 임의대로 바꿈을 할 수 있다.
• keep-all : 단어 단위로 줄바꿈을 한다.

예시

• 영어

<div style="width: 300px;"> 
    <h1>normal</h1>
    <p style="word-break: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean necmollisnulla.Proin gravida velit dictum dui consequat malesuada.</p>
    
	<h1>break-all</h1>
    <p style="word-break: break-all;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean necmollisnulla. Proin gravida velit dictum dui consequat malesuada.</p>
    
	<h1>keep-all</h1>
    <p style="word-break: keep-all;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean necmollisnulla. Proin gravida velit dictum dui consequat malesuada.</p>
</div>

영어로 작성할 경우 normal 과 keep-all의 결과 값이 같다.

• 한글

<div style="width: 300px;"> 
    <h1>normal</h1>
    <p style="word-break: normal;">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세</p>
    
	<h1>break-all</h1>
    <p style="word-break: break-all;">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세</p>
    
	<h1>keep-all</h1>
    <p style="word-break: keep-all;">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세</p>
</div>

한글의 경우 normal 과 break-all의 속성이 같다.

---

여담

:lang(ko) css pseudo-class 를 사용하면 한국어에만 word-break: keep-all; 설정이 가능하다