CSS Эффекты текста
CSS Текст. Переполнение, перенос слов, правила разрыва строк и режимы записи
В этой главе вы узнаете о следующих свойствах:
text-overflowword-wrapword-breakwriting-mode
CSS text-overflow - Переполнение
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 #000;
overflow: hidden;
text-overflow: ellipsis;
}
Попробуйте сами »
В следующем примере показано, как можно отобразить переполненное содержимое при наведении мыши на элемент:
CSS word-wrap - Перенос слов
CSS свойство word-wrap позволяет разбивать длинные слова и переносить их на следующую строку.
Если слово слишком длинное, чтобы вписаться в область, оно расширяется за пределы:
Этот параграф содержит очень длинное слово: это оченьоченьоченьдлинное слово. Длинное слово будет разбито и перенесено на следующую строку.
Свойство word-wrap позволяет принудительно переносить текст - даже если это означает разбиение его на середину слова:
Этот параграф содержит очень длинное слово: это оченьоченьоченьдлинное слово. Длинное слово будет разбито и перенесено на следующую строку.
CSS код выглядит следующим образом:
Пример
Разрешить разбивать длинные слова и переносить их на следующую строку:
p {
word-wrap: break-word;
}
Попробуйте сами »
CSS word-break - Обрывание слов
CSS свойство word-break определяет правила разрыва строки.
Этот параграф содержит текст. Эта строка будет-обрываться-в-дефис.
Этот параграф содержит текст. Строки будут обрываться у любого символа.
CSS код выглядит следующим образом:
CSS writing-mode - Режим записи
CSS свойство writing-mode указывает, расположены ли строки текста горизонтально или вертикально.
Некоторый текст с элементом span из writing-mode vertical-rl.
В следующем примере показаны несколько разных режимов записи:
Пример
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
Попробуйте сами »
Проверьте себя с помощью упражнений!
CSS Свойства текстовых эффектов
В следующей таблице перечислены свойства текстовых эффектов CSS:
| Свойство | Описание |
|---|---|
| text-align-last | Определяет, как выровнять последнюю строку текста |
| text-justify | Определяет, как выровненный текст должен быть выровнен и разнесен |
| text-overflow | Определяет, как переполненный контент, который не отображается, должен передаваться пользователю |
| word-break | Определяет правила разрыва строк для не-CJK-скриптов |
| word-wrap | Позволяет разбивать длинные слова и переносить их на следующую строку |
| writing-mode | Определяет, расположены ли строки текста горизонтально или вертикально |
