CSS многоточие после нескольких строк

В CSS очень просто обрезать текст в одной строке для некоторой ширины и отобразить многоточие.

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 300px;

Но все не так просто, если надо обрезать текст после трёх (нескольких) строк. Это можно сделать с помощью javascript, но это будет не самое элегантное решение. Есть другой простой способ – использовать CSS-свойство line-clamp.

CSS-свойство line-clamp помогает подрезать текст на определенное количество строк.

Синтаксис

.module {
  line-clamp: [none | <integer>];
}

line-clamp может принимать следующие значения:

• none: не устанавливает ограничение, подрезания строк не будет.
• <integer>: устанавливает максимальное количество строк перед подрезанием содержимого, а затем отображает многоточие (…) в конце последней строки.

А как это сделать с text-overflow?

Для text-overflow действительно есть значение ellipsis для ограничения текста:

.truncate {
  text-overflow: ellipsis;

  /* Нужно, чтобы это заработало */
  overflow: hidden;
  white-space: nowrap;
}

See this code overflow: ellipsis on x.xhtml.ru.

Для начала – нормально. Но что, если надо добавить многоточие не в первой строке, а где-нибудь, скажем, в третьей строке текста?

Вот здесь в игру вступает line-clamp. Надо заметить, что для придётся использовать комбинацию из трех свойств:

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

See this code line-clamp on x.xhtml.ru.

Но, есть нюанс…

Это неполная поддержка браузерами. Тут используется префикс -webkit- (который, как ни странно, работает во всех основных браузерах, но это не точно).

Как обычно, уточнить поддержку свойства браузерами можно на странице Caniuse.

Если добавить немного Javascript, например, использовать небольшой скрипт Clamp.js, получится расширить этот список, посмотрите:

See this code clamp.js on x.xhtml.ru.

в основном line-clamp на CSS-tricks