如果有人正在使用SASS/SCSS，并偶然发现了这个问题-也许这个mixin可以帮助:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

这只在webkit浏览器中添加省略号。休息只是把它切断了。

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

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

这是一个jsFiddle。

文本溢出的要求:省略号;工作是一行的空白(pre, nowrap等)。这意味着文本永远不会到达第二行。

因此。在纯CSS中是不可能的。

当我正在寻找完全相同的东西时，我的来源:http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

编辑如果好的CSS神将实现http://www.w3.org/TR/css-overflow-3/#max-lines，我们可以在纯CSS中使用fragments(新)和max-lines(新)。还有一些关于http://css-tricks.com/line-clampin/的更多信息

编辑2 WebKit/Blink有line-clamp: -webkit-line-clamp: 2将把省略号放在第二行。

如果有人正在使用SASS/SCSS，并偶然发现了这个问题-也许这个mixin可以帮助:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

这只在webkit浏览器中添加省略号。休息只是把它切断了。

我不是一个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。

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

我是这样做的:

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

代码:

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

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