Текстовые эффекты CSS
Для переполнения текста, переноса слов, правил переноса строк и режимов письма в CSS есть отдельные свойства.
В этой главе рассматриваются четыре из них:
text-overflow— что происходит с содержимым, которое переполняет областьword-wrap— позволяет длинному слову разделиться и продолжиться на следующей строкеword-break— правила переноса строкwriting-mode— горизонтальное или вертикальное расположение строк текста
Свойство CSS text-overflow
Когда содержимое переполняет область и остаётся скрытым, свойство CSS text-overflow определяет, как сообщить об этом пользователю: текст либо обрезается, либо заканчивается многоточием (...).
Оно действует, только если присутствуют ещё два объявления:
white-space: nowrap;overflow: hidden;
Пример
Два способа обработки переполненного текста: в первом абзаце он обрезан, во втором заканчивается многоточием (...).
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS text-overflow</title>
<style>
p.test1 {
width: 200px;
border: 1px solid #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
width: 200px;
border: 1px solid #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h2>text-overflow: clip:</h2>
<p class="test1">This is some long text that will not fit in the box</p>
<h2>text-overflow: ellipsis:</h2>
<p class="test2">This is some long text that will not fit in the box</p>
</body>
</html>
Показать при наведении
Здесь переполненное содержимое снова становится видимым, как только вы наводите курсор на элемент.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS text-overflow hover</title>
<style>
p.test {
width: 200px;
border: 1px solid #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p.test:hover {
overflow: visible;
}
</style>
</head>
<body>
<p>Hover over the paragraph below to see the full text.</p>
<p class="test">This is some long text that will not fit in the box</p>
</body>
</html>
Свойство CSS word-wrap
Слово, слишком длинное для своей области, просто выступает за её пределы. Свойство CSS word-wrap предотвращает это, позволяя длинным словам разделяться и продолжаться на следующей строке.
Иными словами, оно принудительно переносит текст, даже если разрыв приходится на середину слова.
Пример
Здесь длинное слово разделяется и продолжается на следующей строке.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS word-wrap</title>
<style>
p {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>
<h2>word-wrap: break-word</h2>
<p>This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
Свойство CSS word-break
То, что происходит со словами, доходящими до конца строки, определяет свойство CSS word-break.
Оно принимает одно из трёх значений:
normal— применяются стандартные правила переноса строк языкаbreak-all— чтобы не было переполнения, слово может переноситься на любом символеkeep-all— слова не переносятся
Пример
Сравните word-break: normal в первом абзаце с word-break: break-all во втором.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS word-break</title>
<style>
p.test1 {
width: 140px;
border: 1px solid #000000;
word-break: normal;
}
p.test2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<h2>word-break: normal</h2>
<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>
<h2>word-break: break-all</h2>
<p class="test2">This paragraph contains some text. The lines will break at any character.</p>
</body>
</html>
Свойство CSS writing-mode
Строки текста могут идти горизонтально или вертикально, и выбор между этими вариантами делает свойство CSS writing-mode.
Оно принимает одно из трёх значений:
horizontal-tb— значение по умолчанию: текст идёт горизонтально слева направо, а строки располагаются вертикально сверху внизvertical-rl— текст идёт вертикально сверху вниз, а строки располагаются горизонтально справа налевоvertical-lr— текст идёт вертикально сверху вниз, а строки располагаются горизонтально слева направо
Пример
Несколько режимов письма в действии, включая горизонтальное и вертикальное расположение текста.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS writing-mode</title>
<style>
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test3 {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h2>writing-mode: horizontal-tb</h2>
<p class="test1">This is a paragraph with writing-mode: horizontal-tb (default).</p>
<h2>Vertical text inside a span</h2>
<p>Here is a text with a <span class="test2">span element with a vertical-rl writing-mode</span>.</p>
<h2>writing-mode: vertical-rl</h2>
<p class="test3">This is a paragraph with writing-mode: vertical-rl.</p>
</body>
</html>
Свойства текстовых эффектов CSS
Свойства текстовых эффектов CSS вкратце:
text-justify— выравнивание и интервалы текста, выровненного по ширинеtext-overflow— как сообщить пользователю о переполненном содержимом, которое остаётся скрытымword-break— правила переноса строк, применяемые к словамword-wrap— позволяет длинным словам разделяться и продолжаться на следующей строкеwriting-mode— идут ли строки текста горизонтально или вертикально