CSS3 Text
CSS3 содержит несколько новых текстовых функций.
В этой главе вы узнаете о следующих свойствах текста:
-
text-overflow -
word-wrap -
word-break
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа с последующим -О- указать первую версию, которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
Переполнение текста CSS3
CSS3 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;
} Попробуй сам " В следующем примере показано, как можно отобразить переполненном содержимое при наведении курсора мыши на элемент:
CSS3 Слово Обертывание
CSS3 word-wrap свойство позволяет длинные слова , чтобы иметь возможность быть разорван и обернуть на следующую строку.
Если слово слишком длинное и не помещается в пределах области, она расширяется за пределы:
Этот пункт содержит очень длинное слово: thisisaveryveryveryveryveryverylongword . Длинное слово будет ломаться и завернуть на следующую строку.
Свойство перенос слов позволяет принудительно текст обернуть - даже если это означает расщепление его в середине слова:
Этот пункт содержит очень длинное слово: thisisaveryveryveryveryveryverylongword . Длинное слово будет ломаться и завернуть на следующую строку.
Код CSS выглядит следующим образом:
пример
Разрешить длинные слова, чтобы иметь возможность быть разорван и обернуть на следующую строку:
p {
word-wrap: break-word;
}
Попробуй сам " CSS3 Слово Ломать
CSS3 word-break свойство определяет строки нарушение правил.
Этот параграф содержит некоторый текст. Эта линия-брейк-на-дефис.
Этот параграф содержит некоторый текст. Линии будут разорваться в любой символ.
Код CSS выглядит следующим образом:
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 »
Свойства текста CSS3
В следующей таблице перечислены новые CSS3 свойства текста:
| Имущество | Описание |
|---|---|
| text-align-last | Определяет способ выравнивания последней строки текста |
| text-emphasis | Сокращение для настройки текста упор стиль текста и упор-цвет в одной декларации |
| text-justify | Определяет, насколько оправданными текст должен быть выровнен и разнесены |
| text-overflow | Определяет, как переполнения содержимое, которое не отображается должно быть сигналом для пользователя |
| word-break | Определяет строки, нарушающие правила, не CJK скриптов |
| word-wrap | Позволяет длинные слова, чтобы иметь возможность быть сломана и обернуть на следующую строку |