Cut off from the text if its too long

Question

Where i am listing the products, i dont want to show the full lead of them, so now i cut it off with max-height:90px.

Its working, but how can add some ...-after the text end? I tryed text-allipsis and white space no-wrap, but in that version, only 1 row text was showned, and not 4.

My code now for the text:

.item_list_text{max-height:90px;overflow:hidden;}

Please create a [mcve] demonstrating your problem - we cannot help you if you do not provide any code — Pete, Feb 18 '20 at 09:46
http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ — Robby Cornelissen, Feb 18 '20 at 09:48

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

There's a way to do it using unofficial line-clamp syntax, and starting with Firefox 68 it works with all major browsers.

.item_list_text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
}

body {
   margin: 20px;
}

.item_list_text {
  overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3; /* number of lines to show */
   -webkit-box-orient: vertical;
}

<div class="item_list_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
        </div>

Unless you care about IE users, there is no need to do line-height and max-height fallbacks.

Thanks, its great! Can i use this on
tags on the product title? — Tibi458, Feb 18 '20 at 10:03
@Tibi458 Yes on any tag. n Please accept answers if that helps you — Awais, Feb 18 '20 at 10:04

Cut off from the text if its too long

1 Answers1

tags on the product title?