CSS3 텍스트
CSS3는 몇 가지 새로운 텍스트 기능이 포함되어 있습니다.
이 장에서는 다음과 같은 텍스트 속성에 대해 배우게됩니다 :
-
text-overflow -
word-wrap -
word-break
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
-O- 다음 숫자는 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 텍스트 오버플로
CSS3의 text-overflow 속성은 사용자에게 신호 할 방법 넘친 내용이 표시되지 않도록 지정합니다.
그것은 클리핑 할 수 있습니다 :
이 상자에 맞지 않는 일부 긴 텍스트입니다
또는 그것은 줄임표 (...)로 렌더링 할 수 있습니다 :
이 상자에 맞지 않는 일부 긴 텍스트입니다
다음과 같이 CSS 코드는 다음과 같습니다
예
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
} »그것을 자신을 시도 다음은 요소 유혹 할 때 오버 플로우 콘텐츠를 표시하는 방법을 보여줍니다
CSS3 워드 포장
CSS3의 word-wrap 속성은 긴 단어가 깨진 다음 줄에 포장 될 수 있습니다.
단어 영역 내에 맞추기에는 너무 길면 외부 확장 :
이 단락은 매우 긴 단어를 포함 thisisaveryveryveryveryveryverylongword . 긴 단어는 중단하고 다음 줄로 줄 바꿈됩니다.
워드 랩 속성을 사용하면 줄 바꿈 할 텍스트를 강제 할 수 있습니다 -이 단어의 중간에 분할을 의미하는 경우에도 :
이 단락은 매우 긴 단어를 포함 thisisaveryveryveryveryveryverylongword . 긴 단어는 중단하고 다음 줄로 줄 바꿈됩니다.
다음과 같이 CSS 코드는 다음과 같습니다
CSS3 말씀 속보
CSS3 word-break 속성은 줄 바꿈 규칙을 지정합니다.
이 단락은 텍스트가 포함되어 있습니다. 이 줄은-중단됩니다 -에 - 하이픈.
이 단락은 텍스트가 포함되어 있습니다. 선은 모든 문자에 중단됩니다.
다음과 같이 CSS 코드는 다음과 같습니다
연습으로 자신을 테스트!
CSS3 텍스트 속성
다음 표는 새로운 CSS3 텍스트 속성을 보여줍니다 :
| 재산 | 기술 |
|---|---|
| text-align-last | 텍스트의 마지막 행을 정렬하는 방법을 지정합니다 |
| text-emphasis | 하나의 선언에 텍스트 강조 스타일 및 텍스트 강조 색을 설정하기위한 속기 |
| text-justify | 어떻게 정당화 텍스트하면 정렬 및 간격해야 지정 |
| text-overflow | 사용자에게 신호를해야 표시되지 않는 방법 넘친 내용을 지정합니다 |
| word-break | 비 CJK 스크립트에 대한 줄 바꿈 규칙을 지정합니다 |
| word-wrap | 긴 단어는 다음 줄에 깨진하고 포장 할 수 있도록 허용 |