Как обрезать текст только после двух первых строк?

212

03 декабря 2017, 11:50

Как обрезать текст только после двух первых строк, при этом ширина блока содержащего текст растягивается в зависимости от размера экрана. И если первые две строки не умещаются по высоте то блок растягивается также и по высоте пока полностью не уместит эти 2 строки. Как такое реализовать?

Подобное реализовано на сайте https://www.fl.ru/projects/?kind=4

Answer 1

Вот мой пример: https://jsfiddle.net/g0h10ede/1/

Что важно -

.field {
  width: 500px;
  height: calc(25px * 3); /* не стал писать 75px, чтобы показать, что максимум по высоте на 3 строки выделяю блок */
  padding: 5px;
  border: 1px solid black;
    overflow: hidden;
    line-height: 25px; /* каждая строка будет по высоте 25px, чтобы я точно мог установить высоту блока (это чисто визуально, ни на что не влияет) */
  text-align: justify;
    /* а вот это как раз и дает результат "..." в многострочном тексте */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}

P.S.

Если ты хочешь иметь однострочный текст, который заканчивается "...", то надо сделать так: https://jsfiddle.net/g0h10ede/

.field {
  width: 500px;
  padding: 5px;
  border: 1px solid black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 25px; 
  text-align: justify;
}

P.P.S.

залез на исходник приведённого тобой сайта и там не увидел вообще каких-то свойств css, направленных на обрезание текста - скорее всего он режется на уровне скриптов (например, с использованием javascript) или на сервере

Answer 2

Предыдущий вариант работает только в вебките.

Вот универсальная библиотека: https://dollarshaveclub.github.io/shave/