text-overflow

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"

Код ниже обрежет текст, добавив в конце строки многоточие. Также добавлены свойства, без которых text-overflow не сработает:

        
          
          p {  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}
          p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Доступны два значения этого свойства:

  • clip — текст обрезается ровно по краю родительского блока.
  • ellipsis — при обрезке текста в конце строки добавляется многоточие «…», показывая незавершённость предложения.
Открыть демо в новой вкладке