CSS Text Effects
Переполнение текста CSS, перенос слов и правила разбиения строк
В этой главе вы узнаете о следующих свойствах:
text-overflowword-wrapword-break
Переполнение текста CSS
Свойство CSS text-overflow указывает, как переполненное содержимое, которое не отображается, должно быть сигнализируется пользователю.
Его можно обрезать:
Это некоторый длинний текст который не поместится в коробку
или его можно визуализировать как многоточие (...):
Это некоторый длинний текст который не поместится в коробку
Код CSS выглядит следующим образом:
Пример
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
В следующем примере показано, как можно отобразить переполненное содержимое при наведении указателя мыши на элемент:
Пример
div.test:hover {
text-overflow: inherit;
overflow: visible;
}
CSS перенос слов
Свойство CSS word-wrap позволяет длинные слова, чтобы быть в состоянии быть разбиты и обернуть на следующую строку.
Если слово слишком длинное, чтобы уместиться в пределах области, оно расширяется за пределы:
Этот абзац содержит очень длинное слово: сисисавериверивериверивериверилонгворд. Длинное слово будет ломаться и обернуть к следующей строке.
Свойство Word-Wrap позволяет принудительно обернуть текст, даже если это означает разбиение его в середине слова:
Этот абзац содержит очень длинное слово: сисисавериверивериверивериверилонгворд. Длинное слово будет ломаться и обернуть к следующей строке.
Код CSS выглядит следующим образом:
Пример
Разрешить длинные слова, чтобы быть в состоянии быть разбиты и обернуть на следующую строку:
p {
word-wrap: break-word;
}
CSS слово нарушение
Свойство CSS word-break указывает правила разбиения строк.
Этот абзац содержит некоторый текст. Этой линии will-break-at-hyphens.
Этот абзац содержит некоторый текст. Линии will break at any character.
Код CSS выглядит следующим образом:
Пример
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
Свойства текстового эффекта CSS
В следующей таблице перечислены свойства эффекта CSS text:
| Свойство | Описание |
|---|---|
| text-align-last | Определяет способ выравнивания последней строки текста |
| text-justify | Определяет выравнивание и рассогласование выровненного текста |
| text-overflow | Указывает, как переполненное содержимое, которое не отображается, должно сигнализироваться пользователю |
| word-break | Определяет правила разбиения строк для не-CJK скриптов |
| word-wrap | Позволяет длинные слова, чтобы быть в состоянии быть разбиты и обернуть на следующую строку |