Why I can't truncate text

Question

I want to truncate text after word end, not to truncate on half word, like in the following example.

JSFiddle

What I want to do I is ilustrated in the image below:

Code:

div {
  font-size: 20px;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
}

<div>

  Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut incididunt labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit
  sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum
  dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod
  tempor incididunt ut labore.

</div>

Answer 1

I think this will work.

div{
font-size:20px;
width:80%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
 -ms-word-break: break-all;
 word-break: break-all;
 word-break: break-word;
}

You can also check here : https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/