[CSS] 줄바꿈 속성 word-wrap (normal,break-word)

word-wrap

word-wrap 속성은 텍스트가 너무 긴 경우 끊어서 줄바꿈으로 표시해주는 속성이다.

word-break 속성과의 차이점은 아시아언어의 줄바꿈은 word-break 사용하고 비아시아 언어의 줄바꿈은 word-wrap속성을 사용한다.

아시아언어란 CJK(Chinese, Japanese, Korean)을 말한다.

normal : 기본값으로 줄바꿈을 안해준다.

break-word : 텍스트가 너무 긴 경우 끊어서 줄바꿈을 해준다.

연습소스

css

#div_1 {
  width: 100px;
  border: 1px solid gray;
  word-wrap: normal
}

#div_2 {
  width: 100px;
  border: 1px solid gray;
  word-wrap: break-word
}

#div_3 {
  width: 100px;
  border: 1px solid gray;
  word-wrap: normal
}

#div_4 {
  width: 100px;
  border: 1px solid gray;
  word-wrap: break-word
}
 

html

<div id="div_1">asdfgjhkqweqwrrtyu</div>
<br>
<div id="div_2">asdfgjhkqweqwrrtyu</div>
<br>
<div id="div_1">12345678901234567890</div>
<br>
<div id="div_2">12345678901234567890</div>
<br>
<div id="div_1">가나다라마바사아자차카</div>
<br>
<div id="div_2">가나다라마바사아자차카</div>

https://jsfiddle.net/chjs7290/2kfvaakv/

https://www.w3schools.com/cssref/css3_pr_word-wrap.asp