文本溢出的块级等效：省略号答案

【问题标题】：Block level equivalent of text-overflow:ellipsis文本溢出的块级等效：省略号
【发布时间】：2012-05-16 22:10:09
【问题描述】：

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

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

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

感谢任何帮助。

【问题讨论】：

您希望溢出出现在什么条件下？
您希望每行文本都以省略号结尾吗？所以渲染一个段落，但剪掉它？
不支持多行。您将需要 javascript 来支持这一点。见问题：http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines
听起来有点像这个问题：stackoverflow.com/questions/3404508/…
段落标签是内嵌的，而不是块状的。我需要以省略号结尾的多行。

标签： html css

【解决方案1】：

试试这个Fiddle不是我的

或者有dotdotdot plugin

【讨论】：

dotdotdot 插件满足了这个问题 - 并且有效。现在，如果我能让它垂直和水平扩展，那就太完美了。感谢您的提示！

【解决方案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.

虽然这大致实现了您的意图，但在兼容的浏览器中，它确实存在无法将生成的“省略号”与可见文本的结尾对齐的问题。

【讨论】：

这行得通，但它也无条件地放置省略号，即使文本没有溢出。这些文本并不总是溢出。但是，是的，对于这个问题的非条件版本，这是一个非常好的解决方案。
@JonMitten - 恕我直言，这不是一个好的解决方案，根本。我敢肯定大卫在这里尽了最大的努力，但著名的名人是 CSS3，<sarcasm> 非常好，不需要灵活</sarcasm>。

【解决方案3】：

删除css

 white-space:nowrap;

并为您的 div 设置高度

【讨论】：

设置高度还是最大高度？
为了证明这一点，现在试试 height .. 主要问题（只有 1 行文本）是由于 white-space:nowrap; - 设置高度是因为当您溢出时需要“某些东西”：隐藏。