为什么我不能截断文本

Question

我希望在单词结束后截断文本,而不是截断半个单词,如下例所示.

的jsfiddle

我想做什么我在下图中说明了:

码:

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

我认为这会起作用。

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;
}

您还可以在这里查看：https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/