Как ограничить количество строк c помощью CSS?

Question

[lhav]

Подскажите как сделать аналог «text-overflow: ellipsis; overflow: hidden;» только для нескольких строк.

Ну то есть есть текст, он в несколько строк с переносами. Необходимо ограничить количество строк в 3 единицы.

Пример:

Answer 1

[silencecodetime]

Есть такая возможность:

{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -moz-box;
      -moz-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      line-clamp: 3;
      box-orient: vertical;
}

line-clamp отвечает за количество строк и поодержка у него +95% можно прочитать больше вот тут https://caniuse.com/#search=line-clamp

Answer 2

[oENDark]

Сделайте это не с помощью вёрстки, а в коде проекта. Выводите примерное количество символов, и если больше заданного (которое помещяется в 3 строки), то обрезайте текст (по слову конечно, а не по символьно) и ставьте… в конце. Количество символов можно посчитать на JS.

Comments

[Назар Мокринский]

В php даже есть функции по переносу строки после указанного количества символов, потом строчки дальше третьей можно просто отрезать.

Answer 3

[Eugene]

Посмотрите как здесь сделано в блоке «новое на сайте» flagatrip.ru/

Comments

[Daniel Newman]

Я так поступаю с последней строкой, градиентом от прозрачного к белому и стрелкой.

Answer 4

[spmbt]

{height: сколько-то em или ex (для разных шрифтов разное, но можно зафиксировать line-height); overflow: hidden;}. ellipsis не пройдёт, выйдет за пределы. Если текст точно выходит за пределы, то вешаете троеточие внизу справа по position:absolute; с внешним position: relative;.

Comments

[Сергей Протько]

ellipsis как раз таки пойдет.

[Сергей Протько]

А нет, не подойдет… Можно при помощи js это сделать.