我不是一个JS专业人士，但我想出了一些方法，你可以这样做。

HTML:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

然后使用jQuery将其截断为特定的字符数，但最后一个单词像这样:

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

结果如下所示:

我爱你，我爱你，我爱你。发病原因 基本结果tortor et…

或者，你可以像这样简单地截断它到一个特定的字符数:

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

结果如下所示:

我爱你，我爱你，我爱你。发病原因 结果元素，tortoret euismod…

希望这能有所帮助。

这是jsFiddle。

我发现Skeep的回答是不够的，还需要一个溢出样式:

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;

正如其他人已经回答的那样，纯CSS解决方案是不存在的。 jQuery有一个非常好用的插件，它叫dotdotdot。 它使用容器的宽度和高度来计算是否需要截断和添加省略号。

$("#multilinedElement").dotdotdot();

这是一个jsFiddle。

这是一个纯css的好例子。

.container{ width: 200px; } .block-with-text { overflow: hidden; position: relative; line-height: 1.2em; max-height: 3.6em; text-align: justify; margin-right: -1em; padding-right: 1em; } .block-with-text+.block-with-text{ margin-top:10px; } .block-with-text:before { content: '...'; position: absolute; right: 0; bottom: 0; } .block-with-text:after { content: ''; position: absolute; right: 0; width: 1em; height: 1em; margin-top: 0.2em; background: white; } <div class="container"> <div class="block-with-text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a </div> <div class="block-with-text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="block-with-text"> Lorem Ipsum is simply </div> </div>

我找到了一个解决方案，但你需要知道一个粗略的字符长度，将适合你的文本区域，然后加入一个…到前面的空格。

我是这样做的:

假设一个粗略的字符长度(在本例中为200)并传递给a 与你的文本一起发挥作用 分隔空格，这样你就有了一根长字符串 使用jQuery来切片字符后的第一个“”空格 长度 加入剩下的…

代码:

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

这里有一个小提琴- http://jsfiddle.net/GYsW6/1/

对于支持它的浏览器(大多数现代浏览器)，只需使用行夹，对于较老的浏览器则退回到一行。

  .text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

浏览器支持