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 — при обрезке текста в конце строки добавляется многоточие «…», показывая незавершённость предложения.
Открыть демо в новой вкладке