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

我是这样做的:

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

代码:

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

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

文本溢出的要求:省略号;工作是一行的空白(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将把省略号放在第二行。

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

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

这是一个jsFiddle。

Sass helper mixin:

对于那些使用像Sass这样的预处理器的人来说，你可以有一个mixin，它有一个可选的参数，叫做lines，默认为1，这使得它非常方便地应用一个元素的文本截断，并在你需要的时候改变行数:

@mixin text-ellipsis($lines: 1) {
    text-overflow: ellipsis;
    overflow: hidden;
    @if ($lines > 1) {
        display: -webkit-box;
        -webkit-line-clamp: $lines;
        -webkit-box-orient: vertical;
    } @else {
        white-space: nowrap;
    }
}

用法:

.some-title {
    @include text-ellipsis($lines: 2);
}

这里所有的答案都是错的，他们漏掉了重要的部分，高度

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>

纯css方式用省略号修饰多行文本

调整文本容器的高度， 用-webkit-line-clamp控制断线:2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}