1

我想提供一些小的信息，如果它们对于放入的容器 div 来说太长，它们就会消失在省略号中。如果用户点击文章的链接，我想提供一个视觉指示，表明有更多的文本。我不想使用椭圆图像，但如果需要，我可以使用 jQuery。如果可能的话，我的偏好是完全在 CSS3 中完成。

我发现 text-overflow:ellipsis 属性/值，结合 overflow:hidden 和 white-space:nowrap 允许单行版本，但是多行呢？与我的情况相比。

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

任何帮助表示赞赏。

4

3 回答 3

3

试试这个不是我的小提琴

或者有dotdotdot插件

于 2012-05-16T22:22:58.583 回答
0

给定 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 小提琴演示。

虽然这广泛地实现了您的意图，但在兼容的浏览器中，不幸的是，它确实存在未将生成的“省略号”与可见文本的结尾对齐的问题。

于 2012-05-16T22:23:48.743 回答
0

删除 CSS

 white-space:nowrap;

并为您的 div 设置一个高度

于 2012-05-16T22:25:22.637 回答