word-break 속성

word-break 속성은 컨테이너 너비에 맞지 않는 긴 단어의 글자를 새 줄로 줄 바꿈할 수 있게 합니다.

구문

선택자 {
	word-break: break-all | keep-all | normal;
}

값	설명
`break-all`	컨테이너에 맞지 않는 긴 단어가 새 줄로 줄 바꿈되도록 강제합니다.
`keep-all`	한자 줄 바꿈용입니다.
`normal`	표준 동작: 긴 단어가 컨테이너 너비에 맞지 않으면 단순히 그 경계를 벗어납니다(이때 새 줄에서 시작합니다).

기본값: normal.

이 예제에서 매우 긴 단어는 컨테이너에 맞지 않아 그 경계를 벗어납니다(이때 새 줄에서 시작합니다).

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	word-break: normal;
	border: 1px solid red;
}

이제 맞지 않았던 글자들이 단순히 다음 줄로 줄 바꿈됩니다.

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	word-break: break-all;
	border: 1px solid red;
}