CSS Ефекти тексту
CSS Текст. Text Overflow, Word Wrap, Line Breaking Rules та Writing Modes (Переповнення, перенесення слів, правила розриву рядків та режими запису).
В цьому розділі ви дізнаєтесь про наступні властивості:
text-overflowword-wrapword-breakwriting-mode
CSS text-overflow - Переповнення
CSS властивість text-overflow властивість визначає, як переповнений контент, який не відображається, має бути переданий користувачу.
Він може бути обрізаний:
Це довгий текст, який не поміститься в поле
або він може бути відображений як багатокрапка (...):
Це довгий текст, який не поміститься в поле
CSS код вигляде наступним чином:
Приклад
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000;
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 | Визначає, чи розташовані рядки тексту горизонтально або вертикально |
