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

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

text-overflow работает, если свойство overflow установлено в значение "hidden", а white-space имеет значение "nowrap".

В CSS3 спецификация разрешает использование пользовательской строки.

Значение по умолчанию clip
Применяется К элементам блочного контейнера.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.textOverflow = "ellipsis";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <h3>text-overflow: ellipsis</h3>
    <div>Lorem Ipsum</div>
  </body>
</html>

Пример со значениями "clip", "ellipsis" и "initial":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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 e</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>

Значения

Значение Описание
clip Текст обрезается по размеру области контента. Значение по умолчанию.
ellipsis Добавляет троеточие ("..."), чтобы указать обрезанный текст.
<string> Указывает пользовательскую строку для отображения обрезанного текста. Пользовательская строка отображается внутри области контента.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
4.0+ 12.0+ 7.0+ 3.1+ 11.5+
10.1 -o-

Практикуйте свои знания

Что происходит при использовании свойства CSS 'text-overflow' со значением 'ellipsis'?
Считаете ли это полезным?