为什么我无法截断文字

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/

Answer 2

据我所知，CSS属性text-overflow: ellipsis在这个事实上有一个限制，它只适用于单行文本。

所以对于你的问题，我不相信简单的CSS可以实现你想要的东西（或者至少我无法弄清楚）

我想出了一种在多行上截断单词的方法。请参阅此JSFiddle或以下代码段：

div {
  width: 80%;
  overflow: hidden;
  position: relative;
  line-height: 1em;
  max-height: 3em;
  text-align: justify;
  padding-right: 1em;
  font-size: 20px;
}
div:before {
  content: '...';
  position: absolute;
  right: 2px;
  bottom: 0px;
}

<div>

  Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet
  consectetur adipiscing elitsed 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>

它使用:before伪元素在右下角“创建”一个椭圆。

虽然它可能不是您想要的简单解决方案，但我认为不可能以更简单的方式实现您想要的CSS（如果我错了，有人会纠正我）

注意的： 有一种方法可以使用jQuery和一些正则表达式

p = $('p');
div = $('div').height();
while (p.outerHeight() > div) {
  p.text(function(j, e) {
    return e.replace(/\W*\s(\S)*$/, '...');
  });
}

div {
  font-size: 20px;
  width: 80%;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi purus et ut dictum ligula, dapibus testinglongword, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales
    eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit purus posuere mauris, quis adipiscing ipsumel velit testinglongword rhoncus elementum vestibulum eget, dictum ut velit.
    Nullam venenatis, elit in suscipit purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>
</div>

Answer 3

您可以使用word-wrap: break-word;

div{
  height:50px;
  font-size:20px;
  width:80%;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  display: -webkit-box;
  -webkit-line-clamp: 2;
   word-wrap: break-word;
 margin-right: -0em;
  padding-right: 0em;
}
div:before {
  content: '...';
  position: absolute;
  right: 1px;
  bottom: 2px;
}

<div>

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 lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore.

</div>