CSS3 텍스트
CSS3 텍스트
CSS3에서는 HTML 문서 내에 존재하는 텍스트를 더욱 다양한 방법으로 조작할 수 있게 되었습니다.
CSS3에서 새롭게 추가된 텍스트에 관한 속성은 다음과 같습니다.
1. text-overflow
2. word-wrap
3. word-break
CSS2 텍스트
CSS2까지는 다음과 같은 텍스트 속성만을 사용할 수 있었습니다.
1. color
2. direction
3. letter-spacing
4. word-spacing
5. text-indent
6. text-align
7. text-decoration
8. text-transform
9. line-height
10. text-shadow
11. unicode-bidi
12. vertical-align
13. white-space
CSS3 텍스트 속성 지원 버전
CSS3 텍스트 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다.
| 속성 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| text-overflow | 6.0 |
4.0 |
7.0 | 3.1 |
11.0 9.0 -o- |
| word-wrap | 5.5 |
23.0 |
3.5 | 6.1 | 12.1 |
| word-break | 5.5 | 4.0 | 15.0 | 3.1 | 15.0 |
text-overflow 속성
text-overflow 속성은 콘텐츠(content) 영역을 벗어난 텍스트를 어떻게 표현할지를 설정합니다.
영역을 벗어난 텍스트 부분을 자를 수도 있으며, 생략 부호(…)를 사용하여 표현할 수도 있습니다.
예제
<style>
p { white-space: nowrap; width: 250px; overflow: hidden; }
#p_01 { text-overflow: clip; }
#p_02 { text-overflow: ellipsis; }
</style>
overflow 속성값을 visible로 설정하면, 사용자에게 콘텐츠 영역을 벗어나 생략된 텍스트까지 보여줄 수 있습니다.
word-wrap 속성
word-wrap 속성은 콘텐츠 영역을 벗어난 길이가 긴 단어를 다음 줄에 나누어 표현할 수 있도록 해줍니다.
예제
<style>
p { border: solid 1px black; width: 130px; }
#p_01, #p_03 { word-wrap: break-word; }
</style>
word-break 속성
word-break 속성은 길이가 긴 단어를 나누어 표현해야 할 때 단어가 나뉘는 기준을 설정합니다.
단어를 문자별로 나눌 수도 있으며, 하이픈(-)을 기준으로 나눌 수도 있습니다.
예제
<style>
p { border: solid 1px black; width: 130px; }
#p_02 { word-break: break-all; }
#p_03 { word-break: keep-all; }
</style>
위의 예제에서 word-wrap 속성과 word-break 속성의 차이를 확인할 수 있습니다.
CSS3 text 속성
| 속성 | 설명 |
|---|---|
| text-overflow | 콘텐츠(content) 영역을 벗어난 텍스트를 어떻게 표현할지를 설정함. |
| word-wrap | 길이가 긴 단어가 콘텐츠(content) 영역을 벗어나면 그 단어를 다음 줄에 나누어 표현할 수 있도록 함. |
| word-break | 긴 단어를 나누어 표현해야 할 때 해당 단어가 나뉘는 기준을 설정함. |
| text-emphasis | 사용자가 강조 표현을 설정할 수 있도록 함. |
| text-align-last | 텍스트의 마지막 줄의 정렬 방법을 설정함. |
| text-justify | 텍스트의 정렬이 양끝 맞춤으로 되어 있을 때 그 정렬 방법을 설정함. |
