В 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;
}

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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