Question

我想在最后一行添加省略号，我的市场营销是：

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


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

我希望我的输出应该像黄金黄金黄去...

如果文本溢出。问题是，如果我添加text-overflow:ellipsis，那么整个文本将出现在一行中，如： 黄金黄金大喊...... 我想在页面底部添加省略号。

Answer 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 Extensions”是专有的webkit前缀属性。不要在生产网站上使用，至少截至目前为止。

Answer 2

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

http://dotdotdot.frebsite.nl/

在文本的最后一行添加省略号

2 个答案: