text-overflow

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