Question

我想提供一些小的模糊，如果它们放入容器div的时间过长，它们就会消失在省略号中。我想提供一个视觉指示，如果用户跟随文章的链接，则会有更多文本。我不想使用椭圆图像，但如果需要我可以使用jQuery。如果可能的话，我的偏好是完全在CSS3中完成。

我发现文本溢出：省略号属性/值，结合溢出：隐藏和空白：nowrap允许单行版本，但是多行呢？与我的情况相对。

这些或其他属性/值对是否允许在严格的CSS中完成？

感谢任何帮助。

Answer 1

试试这个Fiddle 不是我的

或者有dotdotdot plugin

Answer 2

根据以下行给出HTML标记：

<div class="multiline"><!-- long string of text... --></div>

<div class="singleline"><!-- long string of text... --></div>

以下CSS：

div {
    /* aesthetic stuff, such as width, max-width, border, line-height etc... */
    overflow: hidden; /* required to hide the overflow */
    position: relative;  /* required to position the pseudo-element */
}
div.multiline {
    max-height: 12em; /* defines the 'overflow point' */
}
div.singleline {
    max-height: 1.5em;
}
div::after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2em;
    text-align: center;
    background-color: #fff;
}

JS Fiddle demo

虽然这大致实现了您的意图，但在兼容的浏览器中，它确实存在不会将生成的“省略号”与可见文本的末尾排列在一起的问题。不幸的是。

Answer 3

删除css

 white-space:nowrap;

并设置div的高度

块级别相当于文本溢出：省略号

3 个答案: