overflow-wrap 속성

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

문법

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

값

기본값: normal.

예제 . normal 값

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

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

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

Результат:

예제 . break-word 값

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

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

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

Результат:

함께 보기