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

我是这样做的:

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

代码:

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

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

我以前使用过jquery - condensed -plugin，看起来它可以做你想做的事情。如果不是，有不同的插件可以满足您的需求。

编辑:给你做了一个演示-注意，我在演示中链接了jquery. condene .js，这是有魔力的，所以完全归功于该插件的作者:)

如果有人正在使用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浏览器中添加省略号。休息只是把它切断了。

如果有人试图让线夹在flexbox中工作，那就有点棘手了——特别是当您使用非常长的单词进行折磨测试时。这段代码片段中唯一真正的区别是min-width: 0;在包含截断文本的伸缩项中，以及换行:断字;。向https://css-tricks.com/flexbox-truncated-text/致敬。免责声明:在写这个答案的时候，Chrome以外的浏览器支持很差。然而，从那时起，情况可能有所改善。

.flex-parent { display: flex; } .short-and-fixed { width: 30px; height: 30px; background: lightgreen; } .long-and-truncated { margin: 0 20px; flex: 1; min-width: 0;/* Important for long words! */ } .long-and-truncated span { display: inline; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word;/* Important for long words! */ } <div class="flex-parent"> <div class="flex-child short-and-fixed"> </div> <div class="flex-child long-and-truncated"> <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span> </div> <div class="flex-child short-and-fixed"> </div> </div>

http://codepen.io/AlgeoMA/pen/JNvJdx (codeen版本)

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

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

.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>