СSS3 Эффект Текста
CSS3 Текст: переполнение, перенос слов и разбиение слов
В этой главе вы узнаете о следующих свойствах:
text-overflow- Переполнение текстаword-wrap- Перенос словword-break- Разбитие слов
CSS3 Переполнение текста
CSS3 свойство 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;
}
Редактор кода »
В следующем примере показано, как отобразить переполненное содержимое при наведении указателя мыши на элемент:
CSS3 Перенос слов
CSS3 свойство word-wrap позволяет разбивать длинные слова и переносить их на следующую строку.
Если слово слишком длинное, чтобы поместиться в пределах области, оно расширяется снаружи:
Этот параграф содержит очень длинное слово: этооченььььььььььььььььььььььььььььььььььдлинноеслово. Длинное слово будет разбито и перенесено на следующую строку.
Свойство word-wrap позволяет принудительно переносить текст,
даже если это означает разбиение текста по середине слова:
Этот параграф содержит очень длинное слово: этооченььььььььььььььььььььььььььььььььььдлинноеслово. Длинное слово будет разбито и перенесено на следующую строку
Код CSS3 выглядит следующим образом:
Пример
Позвольте длинным словам быть разбитыми и переноситься на следующую строку:
p {
word-wrap: break-word;
}
Редактор кода »
CSS3 Разбиение слов
CSS3 свойство word-break задает правила разрыва строк.
Этот параграф содержит некоторый текст. Эта линия будет-перерыв-на-дефисе.
Этот параграф содержит некоторый текст. Линии будут ломаться на любой символ.
Код CSS3 выглядит следующим образом:
Проверьте себя с помощью упражнений!
Свойства CSS3 текстового эффекта
В следующей таблице перечислены свойства текстового эффекта CSS3:
| Свойство | Описание |
|---|---|
| text-align-last | Задает способ выравнивания последней строки текста |
| text-justify | Задает выравнивание и интервал выравнивания текста по ширине |
| text-overflow | Указывает, как переполненное содержимое, которое не отображается, должно сигнализироваться пользователю |
| word-break | Задает правила разрыва строк для сценариев, отличных от CJK |
| word-wrap | Позволяет длинные слова, быть разбитыми и вернуть на следующую строку |
