Свойство CSS text-overflow
Используйте свойство CSS text-overflow, чтобы указать, как сигнализировать о переполнении строчного текста. Значения и примеры.
Свойство CSS text-overflow определяет, каким образом содержимое, выходящее за пределы контейнера, сигнализируется пользователю — как правило, путём обрезки или замены скрытой части многоточием (…). Это одно из свойств CSS3.
На этой странице описаны синтаксис и значения, три условия, которые должен выполнять блок, чтобы text-overflow вступило в силу, способ усечения нескольких строк, типичная ошибка с Flexbox и полный список значений.
Почему нужны три свойства одновременно
Само по себе text-overflow ничего не делает. Оно лишь описывает, как отображать уже переполненный текст, поэтому сначала нужно добиться переполнения и скрыть излишек. Для усечения однострочного текста необходимо задать на одном элементе все три следующих свойства:
white-space: nowrap— запрещает перенос текста, вынуждая его оставаться в одной строке, которая выходит за пределы блока.overflow: hidden— скрывает часть, выходящую за пределы блока (без этого текст просто будет виден снаружи).text-overflow: ellipsis— указывает браузеру обозначать обрезанный текст многоточием вместо жёсткого обрыва.
Если хотя бы одно из этих свойств отсутствует, многоточие не появится. Блоку также необходима ограниченная ширина (или max-width), чтобы вообще было что переполнять.
В CSS3 вместо многоточия можно также задать произвольную строку. Строковое значение может содержать пробелы или любой другой текст. В ранних черновиках спецификации допускалось использовать URL изображения, но впоследствии это было исключено.
| Начальное значение | clip |
|---|---|
| Применяется к | Блочным контейнерным элементам. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM Синтаксис | object.style.textOverflow = "ellipsis"; |
Синтаксис
Значения CSS text-overflow
text-overflow: clip | ellipsis | string | initial | inherit;Пример свойства text-overflow:
Пример кода CSS text-overflow
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #666;
}
</style>
</head>
<body>
<h2>Text-overflow property example</h2>
<h3>text-overflow: ellipsis</h3>
<div>Lorem Ipsum</div>
</body>
</html>Результат
Пример свойства text-overflow со значениями "clip", "ellipsis" и "initial":
Пример CSS text-overflow со значениями clip и ellipsis
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.element1 {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: clip;
border: 1px solid #666;
}
div.element2 {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #666;
}
div.element3 {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: initial;
border: 1px solid #666;
}
</style>
</head>
<body>
<h2>Text-overflow property example</h2>
<h3>text-overflow: clip</h3>
<div class="element1">Lorem Ipsum</div>
<h3>text-overflow: ellipsis</h3>
<div class="element2">Lorem Ipsum</div>
<h3>text-overflow: initial</h3>
<div class="element3">Lorem Ipsum</div>
</body>
</html>Усечение нескольких строк
text-overflow: ellipsis работает только с одной строкой. Чтобы ограничить текст фиксированным количеством строк и добавить многоточие после последней, используйте подход с -webkit-line-clamp. Несмотря на вендорный префикс, он широко поддерживается современными браузерами:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
background-color: #eee;
border: 1px solid #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Clamp to two lines</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>В этом случае white-space: nowrap не задаётся, поскольку текст должен переноситься перед тем, как его обрежут.
Подводный камень: дочерние элементы Flexbox и Grid
Элемент flex или grid по умолчанию имеет min-width: auto, что не позволяет ему сжиматься ниже внутреннего размера содержимого. Это мешает срабатыванию overflow: hidden, из-за чего многоточие не появляется, даже если все три свойства заданы. Решение — добавить min-width: 0 (или overflow: hidden) к усекаемому элементу:
.flex-child {
min-width: 0; /* allow the item to shrink */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Значения
| Значение | Описание | Попробуйте |
|---|---|---|
clip | Обрезает текст на границе области содержимого; усечение может происходить посередине символа. Это значение по умолчанию. | Попробуйте » |
ellipsis | Отображает многоточие ("..."), обозначающее обрезанный текст. Примечание: работает только для одной строки текста. | Попробуйте » |
<string> | Отображает заданную строку для обозначения обрезанного текста. Строка отображается внутри области содержимого. Примечание: ограниченная поддержка в старых браузерах. | Попробуйте » |
initial | Устанавливает свойство в значение по умолчанию. | Попробуйте » |
inherit | Наследует свойство от родительского элемента. |