CSS의 word-break 속성은 텍스트가 요소의 너비를 초과할 때 줄바꿈(행갈이)이 어떤 기준으로 이루어질지를 지정합니다. 특히 한글·일본어·중국어처럼 띄어쓰기가 적은 언어나 긴 영단어가 포함된 콘텐츠에서 텍스트가 컨테이너 밖으로 넘쳐흐르는 현상(오버플로우)을 방지할 때 매우 유용합니다.
주요 속성값
- normal: 브라우저의 기본 줄바꿈 규칙을 따릅니다.
- keep-all: 공백과 하이픈(-)에서만 줄바꿈을 허용합니다. 한글 문장에서 단어가 중간에 잘리지 않도록 할 때 자주 사용됩니다.
- break-all: 모든 문자 사이에서 줄바꿈을 허용합니다. 단어의 의미와 상관없이 임의의 위치에서 텍스트가 끊길 수 있습니다.
예제
다음 코드는 word-break 속성의 두 가지 값(keep-all, break-all)을 비교한 예제입니다.
<html>
<head>
<style>
p.text1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<b>line break at hyphens:</b>
<p class = "text1">Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new skills at
their own pace from the comforts of their drawing rooms.</p>
<b>line break at any character</b>
<p class = "text2">Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new skills at their
own pace from the comforts of their drawing rooms.</p>
</body>
</html>
실행 결과
위 결과에서 확인할 수 있듯이, keep-all을 적용한 첫 번째 문단은 하이픈 위치에서만 줄이 바뀌어 단어 형태가 유지되는 반면, break-all을 적용한 두 번째 문단은 임의의 문자 위치에서 줄이 바뀌어 단어가 중간에 잘리는 것을 볼 수 있습니다.