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

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

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

Пример:
  • Вопрос задан
  • 43081 просмотр
Пригласить эксперта
Ответы на вопрос 4
@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
Ответ написан
Комментировать
oENDark
@oENDark
Сделайте это не с помощью вёрстки, а в коде проекта. Выводите примерное количество символов, и если больше заданного (которое помещяется в 3 строки), то обрезайте текст (по слову конечно, а не по символьно) и ставьте… в конце. Количество символов можно посчитать на JS.
Ответ написан
Methos
@Methos
Посмотрите как здесь сделано в блоке «новое на сайте» flagatrip.ru/
Ответ написан
spmbt
@spmbt
{height: сколько-то em или ex (для разных шрифтов разное, но можно зафиксировать line-height); overflow: hidden;}. ellipsis не пройдёт, выйдет за пределы. Если текст точно выходит за пределы, то вешаете троеточие внизу справа по position:absolute; с внешним position: relative;.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы