Переполнение текста CSS3 (Text Overflow)

Новые текстовые свойства CSS3 могут предоставить больше возможностей для определения представления текста.

Обработка текстового переливания в CSS3

CSS3 ввел несколько новых свойств для изменения текстового содержимого, но некоторые из этих свойств уже существовали долгое время. Эти свойства позволяют точно определить представление текста в веб-браузере.

скрыть текст, который выходит за пределы

например, если спрятать空白 элементаатрибут white-spaceзначение установлено на nowrap, или одно слово слишком длинное, чтобы вместить более долгий адрес электронной почты, может привести к тому, что текст выйдет за пределы (например, запретить переворот строки). В этом случае можно использовать CSS3 атрибут text-overflowатрибутом определить способ отображения текста, который выходит за пределы.

Вы можете показать или вырезать текст, который выходит за пределы, или вырезать и показывать точку-елочку или пользовательскую строку в палатке вырезанного текста, чтобы указать пользователю.

Свойство word-break принимает значения: clip, ellipsis,string。

p　{
　　　　width:　400px;
　　　　overflow:　hidden;
　　　　white-space:　nowrap;
　　　　background:　#cdcdcd;
}
p.clipped　{
　　　　text-overflow:　clip;　/*　clipped　the　overflowed　text　*/
}
p.ellipses　{
　　　　text-overflow:　ellipsis;　/*　display　'…'　to　represent　clipped　text　*/
}

Разрыв переполненного текста

Вы также можете использовать CSS3 word-wrapСвойство разбивает длинное слово и переносит его, чтобы граница содержащего элемента не была превышена.

Свойство word-wrap принимает значения: normal и break-word.

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

для определения правил переноса текста

Вы также можете использовать CSS3 word-breakСвойство 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;
}