[CSS] word-break / word-wrap 속성 (box-sizing)

 

word-break와 word-wrap의 속성 둘다 띄어쓰기 없이 길게 입력했을때 width값을 설정해도 바깥으로 튀어 나오게 되는데 이때 width값에 맞게 적당히 잘라 다음 줄로 내려오도록 하는 속성입니다.

 

word-break - 아시아 언어를 제어합니다.

normal - 기본값으로 자동으로 적당히 줄바꿈합니다.

break-all - width값보다 글씨가 넘칠때  강제로 줄바꿈합니다 (단어가 중간에 끊기면서 줄바꿈이 일어남)

keep-all - 줄바꿈을 할때 한단어에서는 줄바꿈이 일어나지 않고

                 단어와 단어사이(띄어쓰기한부분)에서 줄바꿈이 일어납니다.

 

word-wrap - 비아시아 언어를 제어합니다.

normal, break-word

 

공통 css에 추가 해놓으면 상속되는 속성이기 때문에 편리하게 사용할 수 있습니다.

줄바꿈을 할때 단어가 끊겨서 다음줄로 내려오지 않도록하는 속성은

word-wrap:break-word; word-break:keep-all; 입니다.

 

body{word-wrap:break-word; word-break:keep-all;}

 

 

+) word-break와 같이 공통 css에 많이 추가 해놓는 box-sizing 속성이 있습니다.

 

box-sizing:border-box 는 border, padding값이 박스 width값에 포함이 되어 온전한 width:100px이 됩니다.

width:100px; padding:10px; border:1px solid #000; 을 줬을때,

 

box-sizing:border-box를 설정하지 않았다면 

100px + 20px(padding 10px씩 좌우) + 2px(border 1px씩 좌우) => 총 142px이 됩니다.

 

box-sizing:content-box는 border, padding값을 박스 크기에 포함하지 않는 속성입니다.