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

Свойство text-overflow

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

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

Значения, принимаемые свойством text-overflow: 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 */
}

Строковое значение для свойства 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;
}

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.