How to display 3 dots when text overflow div in height

Question

How to display 3 dots when text overflow div in height. I've found an example how to do it when text overflows div in width

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}

<div class="cut-text">
I like big butts and I can not lie
</div>

But i can't find how to display ... when text overflows div in height.
Any help much appreciated

Does this answer your question? [Text overflow ellipsis on two lines](https://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines) — Grzegorz T., Mar 26 '21 at 21:24

score 5 · Accepted Answer · answered Mar 26 '21 at 21:44

You could achieve height vice text ellipsis through the '-webkit-line-clamp' css property. Use the number based on what line number you want the dots to appear.

.cut-text { 
  width: 160px; 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<div class="cut-text">
I like big butts and I can not lie I like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lie
</div>

How to display 3 dots when text overflow div in height

1 Answers1