Как обрезать текст по количеству строк?

Question

[Юра]

Привет, может кто нить подсказать каким способом можно обрезать текст по высоте количеству строк в резиновом блоке?

То есть у блока не заданных размеров при разных разрешениях соответственно имеет разную высоту и ширину, каким способом задать в этом блоке определённое количество строк, например 5? Может какой то алгоритм подсчёта строк и их обрезка?

Или всё же нужно задать хоть какие то параметры?

Answer 1

[alex]

для элемента с текстом прописываете

overflow: hidden, font-size, line-height, max-height: calc(a * b)

где:
a = line-height в em'ах
b = нужное кол-во строк

пример

<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</div>

.text {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5;
  max-height: calc(1.5em * 5);
}

макс. высота для .text будет равна высоте пяти строк текста

Comments

[Юра]

Действительно простое решение и работает во всех браузерах, забыл сразу написать, что это блоки анонсов, как бы ещё градиент полупрозрачный наложить на последнюю строку, чё то не получается ...

[alex]

Юра:

.text {
  position: relative;
}
.text:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: calc(1.5em * 1);
  background-image: linear-gradient(to right, transparent 0%, #fff 50%);
}

[nickostyle]

Я так понимаю, что "три точки" в конце добавить не получится, т.к. по сути мы просто скрываем остальные строки, а не обрезаем текст.