[CSS] text 조정 CSS (white-space, word-wrap, word-break, text-overflow)

text 를 줄바꿈 한다거나 글자가 영역을 벗어나면 안보이게 또는 점처리 등...

text 를 controll 할 수 있는 css 속성에 관하여 나열해 보겠습니다.

1. white-space (css1)

: text에 대한 공백을 어떻게 처리 할 것인가를 설정하는 속성.

white-space:normal;

기본값으로 연속의 공백이나 줄바꿈을 한칸으로 인정하여 표현.

white-space:pre;

편집툴에서 표현되는 그대로를 표현(tab 이나 띄어 쓰기가 들어간것을 그대로 표현합니다.)

white-space:nowrap;

감싸고 있는 부모의 크기가 정해져 있어도 줄바꿈이 되지 않고 한줄로 표현 됩니다.

white-space:inherit;

부모요소의 값을 상속 받습니다.

2. word-wrap (css3)

: 텍스트가 들어가는 block 요소에 사이즈에 따라 개행(줄바꿈)을 해줍니다.

word-wrap:break-word;

감싸고 있는 부모요소의 크기에 따라 강제로 줄바꿈을 해준다. word-break:break-all; 과 같은 효과를 나타낸다.

3. word-break (css3)

: 텍스트가 들어가는 블록요소의 가로 사이즈에 맞춰 줄바꿈 설정.  강제줄바꿈 방지, 텍스트 길이제한 

word-break:normal;

기본값으로 단어 단위로 끊어서 줄바꿈 합니다.

word-break:break-all;

특수문자를 제외하고 강제로 줄바꿈 합니다.

word-break:break-word;

특수문자를 포함하고 강제 줄바꿈 합니다.

word-break:nowrap;

줄바꿈 하지 않습니다.

word-break:keep-all; 

한글일 경우 띄어쓰기 기준으로 줄바꿈 해줍니다. (ie계열/아시아 언어만 지원,파폭 3.5이상에서는 지원)

4. text-overflow (css3)

정해진 크기의 부모에 text 가 벗어나면 문자열을 안보이게 처리 합니다.

text-overflow:clip;

엘리먼트 테두리에서 글자가 잘리게 됩니다.

text-overflow:ellipsis;

테두리에 닿을 정도가 되면 자동으로 ....을 넣어줍니다.

참고 :

작업을 해오면서 느낀점은 간혹 정해는 테두리 안에 text가 의도치 않게 벗어나는 현상을 목격하곤 합니다.

익숙하지 않은 현상에 늘 구글신(?) 힘을 빌려서 search 하면 word-break:break-all; 속성을 사용하곤 했는데... 어느날은 이 속성을 사용해도 

줄바꿈이 되지않는 황당한 상황을 경험해 보았는데요. 이때 word-wrap:break-word; 를 사용하니 줄바꿈이 되더군요.

그래서 기존의 사용을 word-wrap:break-word; 로 권장하고 싶습니다. ^^