Свойство CSS text-overflow

Свойство CSS text-overflow определяет, как пользователю следует отображать переполняющийся встроенный текст. Это одно из свойств CSS3.

Свойство text-overflow обычно используется вместе со свойством overflow, установленным в hidden, и white-space, установленным в nowrap, но оно может работать и с другими значениями в зависимости от контекста макета.

В CSS3 спецификация позволяет использовать пользовательскую строку. Строковое значение может содержать пробелы, либо вы можете использовать любую другую пользовательскую строку. В более старых версиях спецификации отмечалось, что для многоточия можно использовать URL-адрес изображения, но позже это было исключено.

Начальное значение	clip
Применяется к	Блочным контейнерам.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS3
Синтаксис DOM	object.style.textOverflow = "ellipsis";

Синтаксис

Значения CSS text-overflow

css

text-overflow: clip | ellipsis | string | initial | inherit;

Пример свойства text-overflow:

Пример кода CSS text-overflow

html

<!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>

Try it Yourself »

Результат

CSS text-overflow со значениями clip и ellipsis

Пример свойства text-overflow со значениями "clip", "ellipsis" и "initial":

Пример значений clip и ellipsis CSS text-overflow

html

<!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>

Try it Yourself »

Значения

Значение	Описание	Запустить »
`clip`	Обрезает текст по границе области контента; усечение может произойти посередине символа. Это значение по умолчанию.	Запустить »
`ellipsis`	Отображает многоточие ("..."), чтобы показать обрезанный текст. Примечание: Работает только для текста в одну строку.	Запустить »
`<string>`	Отображает заданную строку для представления обрезанного текста. Строка отображается внутри области контента. Примечание: Ограниченная поддержка в старых браузерах.	Запустить »
`initial`	Заставляет свойство использовать значение по умолчанию.	Запустить »
`inherit`	Наследует свойство от родительского элемента.

Практика

Свойство text-overflow работает, если

свойство overflow установлено в "hidden", а white-space — в "normal".свойство overflow установлено в "visible", а white-space — в "nowrap".свойство overflow установлено в "hidden", а white-space — в "nowrap".свойство overflow установлено в "visible", а white-space — в "normal".

Свойство CSS text-overflow ​

Синтаксис ​

Пример свойства text-overflow: ​

Результат ​

Пример свойства text-overflow со значениями "clip", "ellipsis" и "initial": ​

Значения ​