如何仅在两行文本之后使用 CSS 文本溢出？ [复制]答案

【问题标题】：How do I use CSS text-overflow only after two lines worth of text? [duplicate]如何仅在两行文本之后使用 CSS 文本溢出？ [复制]
【发布时间】：2013-06-26 17:22:10
【问题描述】：

我意识到这个问题与另一个问题 (Wrap a text within only two lines inside div) 基本相同，但是，该线程中没有一个答案对我来说是正确的。

我的情况归结为：我有一个固定宽度和固定高度的 DIV，但它是一个可变长度文本的容器。如果长度超过第一行，则应该换行到第二行；如果文本超过第二行，则应使用省略号截断。

到目前为止，我正在使用以下内容：

.name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 20px;
  line-height: 10px;
  width: 64px;
}

但是，显然这并没有结束；通过一些更改，我可以让它换行到第二行，但是当它换行时，省略号不会被应用。

就另一个帖子中发布的答案而言，this one 是最接近的，但它将省略号应用于两行文本，而不仅仅是第二行。

有没有办法只使用 CSS 来做到这一点，还是我必须使用 JavaScript 来完成这个？

【问题讨论】：

标签： html css

【解决方案1】：

这是一个非常好的问题，但我认为没有一个好的答案。来自cimmanon 的链接和bažmegakapa 的答案可能是我的选择，因为使用伪:after 添加... 之类的解决方案看起来很俗气。即使你能找到解决方案，它也可能依赖于使用供应商前缀，这会降低在较小浏览器上的体验。 jQuery 选项可能并不理想，但它应该可以跨平台工作。

【讨论】：

【解决方案2】：

您必须在底角的文本上使用伪元素来伪造它。 text-overflow:ellipsis 在单行上工作。

【讨论】：