Question

我想将我的长篇文章包装成三到四行，下面还有一个按钮。目前，我正在使用以下css代码。

.truncate {
    width: auto;
    text-align: justify;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

上面的css类做了我想要的。但是，它只能将精简版缩短为单行代码。我尽一切可能把它变成三四线半，并且没有成功。我想添加一个高度属性并没有改变。请问我该如何控制行数。？任何帮助将不胜感激。

更新

就像SO here一样。问题标题，帖子只有两行。请问我该如何实现？

Answer 1

您可以使用-webkit-line-clamp: 2; -webkit-box-orient: vertical;。但它仅适用于webkit浏览器。

http://jsfiddle.net/tv2mfxe5/1/

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

如果这对你不起作用。我建议使用jQuery插件dot dot dot

如何将长字符串包装并截断为css中的三行

1 个答案: