Как сделать перенос первой строки и сокрытие всего остального в блоке?

123

19 июня 2019, 09:00

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

Уточнение: дизайн страницы гибкий. Соответственно, ширина ячейки меняется в зависимости от экрана. Есть мысль разбивать строку на клиенте используя JS

Answer 1

Вот вариант с англоязычного SO.

Но это решение не поддерживается Эксплорером и Файерфоксом.

.two-lines-only { 
  /* суть дела */ 
  overflow: hidden; 
  text-overflow: ellipsis; 
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; 
   
  /* внешний вид */ 
  font-size: 2em; 
  height: 3em; 
  line-height: 1.5; 
  width: 15em; 
}

<div class="two-lines-only"> 
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores dicta maxime dolorum. Illo harum pariatur dolorem, provident laborum maiores praesentium molestiae culpa molestias officia veniam aut neque rerum dolores! 
</div>

Answer 2

Вот что мне помогло в решении проблемы

http://dotdotdot.frebsite.nl

Так как требовалось ещё и отцентровать блок по вертикали, вот, что я сделал.

HTML

<div class="table_row_item">
    <p>очень длинный текст, который надо перенести только один раз а в конце добавить многоточие, ага.</p>
</div>

CSS

.table_row_item{
  border: solid black 1px;
  width: 150px;
  padding: 5px;
  height: 30px;
  display: flex;
  align-items: center;
}
.table_row_item p{
  line-height: 10px;
  font-size: 10px;
  width: 100%;
  height: 24px;
}

$(document).ready(function(){
    $(".table_row_item p").dotdotdot({
        callback: function(truncated){
            $(this).css("height", "auto");
        }
    });
});