在文本的最后一行添加省略号 [重复]答案

【问题标题】：add elipsis on the last line of text [duplicate]在文本的最后一行添加省略号 [重复]
【发布时间】：2014-07-18 12:34:51
【问题描述】：

我想在最后一行添加省略号，我的标记是：

<h4 class="heading4 js-heading4">Yellow gold Yellow gold Yellow gold</h4>


.heading4 {
    height: 98px;
    position: relative;
    width: 200px;
    overflow: hidden;
    white-space: nowrap
}

我希望我的输出应该像 Yellow gold Yellow gold Yellow go...

如果文本溢出。问题是如果我要添加text-overflow:ellipsis，那么整个文本都会出现在一行中，例如： Yellow gold Yellow gold Yell...我想在页面底部添加省略号。

【问题讨论】：

对不起，我不清楚...
您可能需要查看 dotdotdot.jquery。
您的问题中有很多拼写错误，例如 elipsis 和 oveflow。

标签： jquery css

【解决方案1】：

使用标准 CSS，没有。你不能。

但是，有一些非标准的浏览器特定的 CSS 可以做到这一点。例如基于webkit 的浏览器使用-webkit-line-clamp 支持此功能（尤其是Chrome）：

演示：http://jsfiddle.net/abhitalks/C34Gm/1/

相关 CSS：

p {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions

注意：这些“Webkit 扩展”是专有的以 webkit 为前缀的属性。不要在生产网站上使用，至少现在是这样。

【讨论】：

我需要这个用于移动浏览器，所以它适用于移动设备吗？
@SachinRawal：哪款手机和哪款浏览器？正如我所说，这是webkit 唯一的专有扩展。它适用于 iOS 上的 Safari。它也适用于 Chrome。除此之外，运气不好。你为什么不尝试在你的手机上使用那个小提琴。

【解决方案2】：

使用此 jquery 插件可根据您的要求在文本末尾自动创建日食，而无需重新发明轮子：

http://dotdotdot.frebsite.nl/

【讨论】：