javascript - 多行文本的情况下，用省略号“...”隐藏超出范围的文本

Question

在单行文本的情况下，可以用来使超出范围的文本用省略号隐藏：

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

但是当遇到多行的文本，固定了高度的情况下，这又该如何写呢？
像下面这个文本一样，结尾是 "..."

+------------------------------------------+
| Over the past day or so the vituperation |
| against the iOS 6 Maps app, AKA the Maps |
| app that makes you wish you were ...     |
+------------------------------------------+

Answer 1

Webkit支持一个名为-webkit-line-clamp的属性，他其实是一个WebKit-Specific Unsupported Property

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

http://jsfiddle.net/Cople/maB8f/

p {
    overflow: hidden;
    white-space: normal;
    height: 3em;
    text-overflow: -o-ellipsis-lastline;
}

Demo: http://jsfiddle.net/Cople/ash5v/

参考自：http://c7sky.com/text-overflow-ellips...

简单地说，就是没有标准的解决方案，对于这类需求，最好在后端处理或者前端用脚本做截断

Answer 2

可以参考这个链接：
http://www.mobify.com/dev/multiline-e...

利用
overflow:hidden;
position:relative;
::after
实现，很巧妙。

Answer 3

这个可以https://github.com/joe223/Aut...