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

Question

我想提供一些小的格式回复信息，如果它们对于放入的容器div来说太长，它们会消失在省略号中。我想提供一个视觉指示，有更多的文本，如果用户遵循链接到文章。我不想使用椭圆图像，但如果需要，我可以使用jQuery。如果可能的话，我更倾向于完全使用CSS3。

我发现text-overflow:省略号属性/值，与overflow:hidden和空格: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的高度