word-break 속성

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

구문

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

값

기본값: normal.

예제 . normal 값

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

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

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

Результат:

예제 . break-all 값

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

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

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

Результат:

함께 보기