CSS3에서 단어가 줄바꿈되는 방식을 지정하려면 word-break 속성을 사용합니다. 이 속성은 텍스트가 요소의 경계를 넘을 때 줄이 어디서 나뉠지를 결정하며, 특히 좁은 컨테이너 안에 긴 문장이나 URL을 배치할 때 유용합니다.
word-break 속성의 주요 값
word-break 속성에 사용할 수 있는 대표적인 값은 다음과 같습니다.
- normal: 브라우저의 기본 줄바꿈 규칙을 따릅니다. 한글·중국어·일본어(CJK) 텍스트는 임의로 끊지 않습니다.
- break-all: 모든 문자 사이에서 줄바꿈을 허용합니다. 영어 단어 중간이라도 경계에 닿으면 잘려 나갑니다.
- keep-all: CJK 텍스트를 공백 기준으로만 줄바꿈합니다. 한글 문장이 단어 단위로 깔끔하게 유지됩니다.
- break-word: (비권장, 폐기 예정) overflow-wrap: break-word와 유사하게 동작하며, 단어 전체가 넘칠 때만 줄을 바꿉니다.
다음은 CSS3로 단어 줄바꿈 규칙을 지정하는 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
span {
display: inline-block;
font-weight: bold;
font-size: 20px;
margin-right: 20px;
}
div {
width: 50px;
border: 3px solid #3008c0;
margin: 10px;
padding: 10px;
font-size: 18px;
display: inline-block;
margin-right: 20px;
}
.normal {
word-break: normal;
}
.break-all {
word-break: break-all;
}
.break-word {
word-break: break-word;
}
</style>
</head>
<body>
<h1>Word Breaking Rules Example</h1>
<span>NORMAL </span> <span>BREAK ALL</span> <span>BREAK WORD</span>
<br />
<div class="normal">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="break-all">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="break-word">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</body>
</html>실행 결과
위 코드를 실행하면 세 개의 박스에서 각각 다른 줄바꿈 결과를 확인할 수 있습니다.
- NORMAL: 기본 규칙에 따라 공백에서만 줄이 바뀌고, 긴 단어는 박스를 벗어날 수 있습니다.
- BREAK ALL: 문자 단위로 강제 줄바꿈되어 좁은 박스 안에서도 텍스트가 넘치지 않습니다.
- BREAK WORD: 단어가 통째로 넘칠 경우에만 줄이 바뀝니다.
참고 사항
break-word 값은 비표준으로 분류되어 있으므로, 최신 프로젝트에서는 overflow-wrap: break-word 또는 overflow-wrap: anywhere를 사용하는 것이 권장됩니다. 또한 한글 콘텐츠에서는 keep-all 값을 활용하면 어색한 중간 끊김 없이 자연스러운 문단 배치를 만들 수 있습니다.