格式化后将文本截断为特定行数

Question

我正在制作一个网站，该网站会在YouTube API中显示一些视频，并在服务器端截断视频说明为170个字符。它们必须放在一个狭窄的盒子中，所以每当它包含URL或长字使它包装很多时，它有时会溢出容器。是否有客户端方式截断字符串并在末尾添加省略号（我可以使用overflow：hidden但我不能使用省略号。这是我的最后手段。）

以下是我正在尝试做的图片：

Answer 1

您可以使用text-overflow:ellipses;但不幸的是，这仅适用于我认为您不需要的white-space:nowrap。

想象你有文字的DIV：

overflow:hidden

样式如下：

:after

只需添加

即可

<div id="text">
    (really long text here)
</div>

和宾果：http://jsfiddle.net/tFZEb/3/

Answer 2

以省略号结尾的唯一原生方式是多行文字 -webkit-box＆amp; -webkit-line-clamp对它的支持很低。

div{
 width:150px;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2; /* number of lines to show */
 -webkit-box-orient: vertical;
}

示例http://jsfiddle.net/rmy2Y/

否则你需要找到一些css hacks或js脚本。