Question

我意识到这个问题与另一个问题基本相同（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才能完成此任务？

Answer 1

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

Answer 2

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

如何在两行文本之后才使用CSS文本溢出？

2 个答案: