html - 为什么我不能截断文本

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/