[CSS] 줄바꿈 속성 word-break (break-all, keep-all)

word-break

word-break는 텍스트들을 줄을 바꾸면서 표시해야 할때 텍스트를 어떤식으로 줄바꿈 해줄지 정하는 속성.

break-all : 문자 단위로 줄바꿈 - 문자 단위로 줄바꿈을 해주는 속성 문자를 강제로 줄바꿈을 해준다.

keep-all : 단어 단위로 줄바꿈 - 단어 단위로 줄바꿈을 해준는 속성 단어단위로 강제로 줄바꿈을 해준다

잘 이해가 안될때는 역시 테스트소스로 보는게 더 빠르다....! :)

word-break 연습소스

css

table {
  width: 100%;
  table-layout: fixed
}

td {
  border: 1px solid gray
}

html

<table>
  <tr>
    <td style="word-break:break-all">word-break:break-all(글자단위 자름)</td>
    <td style="word-break:keep-all">word-break:keep-all(단어단위 자름)</td>
    <td style="word-break:keep-all;text-align:justify">word-break:keep-all;text-align:justify</td>
  </tr>
  <tr>
    <td style="word-break:break-all">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
    <td style="word-break:keep-all">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
    <td style="word-break:keep-all;text-align:justify">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
  </tr>
  <tr>
    <td style="word-break:break-all">남산 위에 저 소나무 철갑을 두른 듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
    <td style="word-break:keep-all">남산 위에 저 소나무 철갑을 두른 듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
    <td style="word-break:keep-all;text-align:justify">남산 위에 저 소나무 철갑을 두른 듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
  </tr>
  <tr>
    <td style="word-break:break-all">가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
    <td style="word-break:keep-all">가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
    <td style="word-break:keep-all;text-align:justify">가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
  </tr>
  <tr>
    <td style="word-break:break-all">이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
    <td style="word-break:keep-all">이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
    <td style="word-break:keep-all;text-align:justify">이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
  </tr>
</table>
 

word-break:keep-all 속성 사용시 우측에 공간이 많이 남게 되는경우가 있는데

text-align:justify (좌우정렬) 속성과 함께 쓰면 좌우를 정렬해 주기 때문에 좀더 보기 좋아 진다.

http://jsfiddle.net/chjs7290/3ay6d8hb/?utm_source=website&utm_medium=embed&utm_campaign=3ay6d8hb

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