overflow-wrap 속성

overflow-wrap 속성은 컨테이너 너비에 맞지 않는 긴 단어의 글자를 새로운 줄로 옮길 수 있게 합니다.

문법

선택자 {
	overflow-wrap: break-word | normal;
}

값	설명
`break-word`	컨테이너에 맞지 않는 긴 단어를 새 줄로 나눕니다. 이때 단어는 새 줄에서 시작합니다.
`normal`	표준 동작: 긴 단어가 컨테이너 너비에 맞지 않으면 단순히 경계를 벗어납니다(이때 새 줄에서 시작합니다).

기본값: normal.

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

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

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

이제 맞지 않던 글자들이 단순히 다음 줄로 옮겨집니다(이때 긴 단어는 여전히 새 줄에서 시작합니다):

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

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