CSS 줄 바꿈 속성은 긴 단어를 분리하고 다음 줄로 넘어가는 데 사용됩니다. 이 속성은 깨지지 않는 문자열이 너무 길어 포함 상자에 맞지 않을 때 오버플로를 방지하는 데 사용됩니다.

이 속성은 단어가 너무 길어서 컨테이너에 맞지 않을 때 오버플로를 방지하기 위해 단어의 구분을 정의합니다. 내용이 컨테이너의 경계를 초과할 때 단어 분리를 지정합니다.

통사론

 word-wrap: normal | break-word | initial l inherit ; 

가치

정상: 허용된 중단점에서만 단어를 분리하는 데 사용되는 기본값입니다.

중단 단어: 깨지지 않는 단어를 깨뜨릴 때 사용됩니다.

초기의: 속성을 기본값으로 설정하는 데 사용됩니다.

상속하다: 상위 요소로부터 속성을 상속합니다.

예

 .test { width: 200px; background-color: lightblue; border: 2px solid black; padding: 10px; font-size: 20px; } .test1 { width: 11em; background-color: lightblue; border: 2px solid black; padding: 10px; word-wrap: break-word; font-size: 20px; } <p> In this paragraph, there is a very long word: iamsooooooooooooooooooooooooooooooolongggggggggggggggg. The long word will break and wrap to the next line. </p> 

산출