3

我意识到这个问题与另一个问题基本相同（在 div 内仅将文本包装在两行内），但是，该线程中的任何答案都没有对我正确工作。

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

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

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

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

至于另一个线程中发布的答案，这个最接近，但它将省略号应用于两行文本，而不仅仅是第二行。

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

4

2 回答 2

1

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

于 2013-06-26T17:54:48.700 回答
0

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

于 2013-06-26T17:33:16.620 回答