В CSS3 есть несколько новых свойств для изменения текстового содержимого. Эти свойства дают вам точный контроль над отображением текста в веб-браузере.
Свойство text-overflow
Текстовый контейнер может переполниться, если ему запрещается перенос, например, если для свойства white-space задано значение nowrap для содержащего элемента или если одно слово слишком длинное для этого контейнера. В такой ситуации вы можете использовать CSS3-свойство text-overflow, чтобы определить, как будет отображаться переполненное текстовое содержимое.
Вы можете обрезать переполненный текст или добавить символ многоточия …, визуально показывая, что текст обрезан в этом месте.
Значения, принимаемые свойством text-overflowclip, 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 */
}Строковое значение для свойства text-overflow не поддерживается в большинстве веб-браузеров, вам следует избегать использования этого значения.
Свойство word-wrap
Вы также можете разбить длинное слово и принудительно перенести его на новую строку, которая выходит за границы содержимого элемента, используя CSS3-свойство word-wrap.
Значения, принимаемые свойством word-wrap: normal и break-word.
p {
width: 200px;
background: #ffc4ff;
word-wrap: break-word;
}Свойство word-break
Вы также можете указать правила разрыва строк для текста (т.е. как разбивать строки в словах) самостоятельно, используя CSS3-свойство 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;
}
