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