skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180

В 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;
}
kwork banner 480x320kwork banner 728x90kwork banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600

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

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

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

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

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

Руководство по свойству 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 для отдельных сторон используя…