Как добавить многоточие к тексту CSS

Для того, чтобы добавить многоточие к строке можно применить свойство text-overflow со значением ellipsis, чтобы многоточие появилось нужно запретить перенос текста с помощью свойства white-space со значением nowrap, а так же скрыть текст за пределами блока с помощью свойства overflow со значением hidden.

Пример

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue.

HTML


<p class="text-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue.</p>
      

CSS


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