css 带省略号的自动换行

Question

仅使用 CSS，我想要自动换行，然后在垂直填充容器后使用省略号。根据研究，如果 white-space: nowrap 我只能使用省略号 - 这只会给我一行。

context 是一个已知高度和可变宽度的父 div，带有一个子 a 元素，如果它不在 max-height: 100%，则它应该始终垂直居中。

如果 display: table 在父级中，并且 display: table-cell 和 max-height: xxx 似乎应该可以工作, text-overflow: ellipsis 在 child 中指定。

我不认为这要求很多，但已经晚了，我可能会遗漏一些东西。是否有名为 still-cant-be-done-in-html5.com 的网站？

Fiddle

Answer 1

有一个 webkit-only 功能叫做“line clamping”，它可以实现我认为你正在寻找的功能。不幸的是，它是非标准的，目前没有计划(至少我知道)使其成为任何标准的一部分。

https://css-tricks.com/line-clampin/

这将使用以下 CSS 来完成:

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

使用此代码，如果元素的内容用文本填充超过 3 行，它将在第三行用省略号截断。

有几个不同的 JavaScript 库试图完成类似的事情，您可以在我包含在此答案中的链接中看到它们。不幸的是，使用标准 CSS，text-overflow: ellipsis 仅限于一行。

或者，目前有a thread about "region fragments"在 W3C 邮件列表中以及如何使用它们来制作多行元素带有省略号，但该规范仍处于草案阶段，可能需要数年时间才能使其进入任何浏览器。