CSS3 텍스트 초과(Text Overflow)

CSS3의 새로운 텍스트 속성은 텍스트 표시에 대한 더 많은 지정을 제공할 수 있습니다.

CSS3에서 텍스트 초과 처리

CSS3텍스트 내용을 수정하기 위해 몇 가지 새로운 속성을 도입했습니다. 그러나 그 중 일부는 오랫동안 존재했습니다. 이 속성들은 웹 브라우저에서 텍스트 표시를 정확하게 지정할 수 있도록 합니다.

초과된 텍스트를 숨기기

예를 들어, 공백 요소의흰색-space속성 값이 nowrap로 설정되거나 단일 단어가 너무 길어서 긴 이메일 주소를 포함할 수 없으면 텍스트 초과가 발생할 수 있습니다(예: 줄 바꿈을 금지). 이 경우 CSS를 사용할 수 있습니다.3 text-overflow속성을 사용하여 초과된 텍스트 내용의 표시 방식을 설정할 수 있습니다。

초과된 텍스트를 표시하거나 잘라내거나, 잘라낸 텍스트의 palace에 점호호나 사용자에게 표시할 개별 문자열을 표시하여 사용자에게 표시할 수 있습니다。

이 word-break 속성이 받을 수 있는 값은 clip, ellipsis,string。

p {
　　　　width:　400px;
　　　　overflow: 숨기기;
　　　　흰색-공백: nowrap;
　　　　배경: #cdcdcd;
}
p.clipped {}}
　　　　text-overflow: clip;　/*　clipped the overflowed text　*/
}
p.ellipses {
　　　　text-overflow: ellipsis;　/*　display '…' 클리핑된 텍스트를 나타내기 위해　*/
}

중간에 텍스트를 끊기

CSS를 사용하여3 word-wrap속성은 긴 단어를 끊고 줄 바꿈하여 포함된 요소의 경계를 초과하는 것을 가능하게 합니다.

이 word-wrap 속성이 허용하는 값은: normal과 break-word.

p {
　　　　width:　200px;
　　　　background: #ffc4ff;
　　　　word-wrap: break-word;
}

텍스트 줄 바꿈 규칙을 지정할 수 있습니다.

CSS를 사용하여3 word-break속성을 통해 텍스트의 줄 바꿈 규칙을 자체 지정할 수 있습니다. (즉, 단어에서 줄 바꿈하는 방법)

허용 가능한 값 word를 통해-break 속성은: normal, break-all과 keep-all.

p {
　　　　width:　150px;
　　　　padding:　10px;
}
p.break {
　　　　background: #bedb8b;
　　　　word-break: break-all;
}
p.keep {
　　　　background: #f09bbb;
　　　　word-break: keep-all;
}