cutting text inside div using css

Question

Is there a way to cut a text inside div using css to be like this?

Hello World! Hello World!
Hello World! Hello Wor...

What i mean here is to be 2 line of text then dots at the end instead of having one line then dots

Like this https://jsfiddle.net/cf8q6o3n/ In this link I have code but it's 1 line text then dots. I need it 2 line of text then dots.

Here is my code:

HTML:

<div class="div1">
Hello World. Hello World. Hello World. 
</div>

CSS

.div1 {width:90px;border:1px solid #000;white-space:nowrap;overflow:hidden !important;text-overflow:ellipsis;}

Possible duplicate of [Limit text length to n lines using CSS](https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css) — showdev, Jul 28 '17 at 19:21
Also see [Applying an ellipsis to multiline text](https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text) — showdev, Jul 28 '17 at 19:21

score 0 · Accepted Answer · answered Jul 28 '17 at 19:36

0

Change your CSS as below:

.div1 {
  width:90px;
  border:1px solid;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

answered Jul 28 '17 at 19:36

H.P.

A complete explanation would be helpful for this and future readers. – showdev Jul 28 '17 at 19:38

1 Answers1