Отображение до 3 строк текстового поля

Question

Цель : я хотел бы отобразить до 3 строк длинного текстового поля в <div> определенной ширины.

Текущий ошибочный подход :

<style>
  div{ 
    width:50%;
    height:100px;
    padding:10px;
    white-space:normal;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
  }
</style>


<div>
  <%= @company.description %>
</div>

Задача : Выше обрезается нижняя строка, если она не идеально выровнена с произвольной высотой 100px + 20px.Таким образом, я часто получаю строку текста наполовину обрезанную по горизонтали.Как вместо этого обрезать текст до 3 целых строк текста?

Answer 1

Используйте em, а не px для height.Итак, что-то вроде 3em или 3.12em, чтобы получить правильное значение (учитывает также отступы).