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	Значение элемента наследуется от родительского элемента.


4.0+	12.0+	7.0+	3.1+	11.5+ 10.1 -o-

4.0+

12.0+

7.0+

3.1+

11.5+
10.1 -o-

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

Синтаксис

Пример

Пример

Значения

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

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