Текстовые эффекты CSS
Переполнение текста в CSS , перенос слов, правила разрыва строк и режимы записи
В этой главе вы узнаете о следующих свойствах:
text-overflowword-wrapword-breakwriting-mode
Переполнение текста 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 {
overflow: visible;
}
Перенос слов в CSS
Свойство CSS word-wrapпозволяет разбивать длинные слова и переносить их на следующую строку.
Если слово слишком длинное, чтобы поместиться в области, оно расширяется за ее пределы:
Этот абзац содержит очень длинное слово: thisisaveryveryveryverylongword. Длинное слово будет разорвано и перенесено на следующую строку.
Свойство word-wrap позволяет принудительно переносить текст, даже если это означает его разделение посередине слова:
Этот абзац содержит очень длинное слово: thisisaveryveryveryverylongword. Длинное слово будет разорвано и перенесено на следующую строку.
Код CSS выглядит следующим образом:
Пример
Разрешить разбивать длинные слова и переносить их на следующую строку:
p {
word-wrap: break-word;
}
Разделение слов CSS
Свойство CSS word-breakопределяет правила разрыва строк.
Этот абзац содержит некоторый текст. В этой строке будут дефисы.
Этот абзац содержит некоторый текст. Строки будут разрываться на любом символе.
Код CSS выглядит следующим образом:
Пример
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
Режим записи CSS
Свойство CSS writing-modeуказывает, будут ли строки текста расположены горизонтально или вертикально.
Некоторый текст с элементом span свертикальный-rlрежим письма.
В следующем примере показаны несколько различных режимов записи:
Пример
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
Свойства текстового эффекта CSS
В следующей таблице перечислены свойства текстового эффекта CSS:
| Property | Description |
|---|---|
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| word-break | Specifies line breaking rules for non-CJK scripts |
| word-wrap | Allows long words to be able to be broken and wrap onto the next line |
| writing-mode | Specifies whether lines of text are laid out horizontally or vertically |