带省略号的 css 自动换行

Question

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

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

如果在父项中指定了display: table，并且在子项中指定了display: table-cell 和max-height: xxx、text-overflow: ellipsis，它似乎应该可以工作。

我认为这要求不高，但为时已晚，我可能会遗漏一些东西。有没有一个叫still-cant-be-done-in-html5.com的网站？

Fiddle

Answer 1

有一个名为“线钳制”的仅限 webkit 的功能，可以实现我认为您正在寻找的功能。不幸的是，它是非标准的，目前没有计划（至少我知道）使其成为任何标准的一部分。

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 仅限于一行。

另外，W3C 邮件列表中目前有 a thread about "region fragments" 以及如何使用它们使多行元素具有省略号，但该规范仍处于草稿阶段，可能需要数年时间才能进入任何浏览器.

Answer 2

据我所知，现在有一种方法可以用纯 CSS 做到这一点。

您可以使用Clamp.js。但我必须警告你，它的结果有时会被破坏。所以我使用了一个小技巧，将clamp的行数设置为3，并将包装元素的line-height CSS属性设置为¹/₃^rd 元素的高度。

// Copying Clamp.min.js here because we cannot execute RAW file from github as it's content type is 'text/plain'.
// Scroll down to see the last line of code.
/*!
 * Clamp.js 0.5.1
 *
 * Copyright 2011-2013, Joseph Schmitt http://joe.sh
 * Released under the WTFPL license
 * http://sam.zoy.org/wtfpl/
 */
(function(){window.$clamp=function(c,d){function s(a,b){n.getComputedStyle||(n.getComputedStyle=function(a,b){this.el=a;this.getPropertyValue=function(b){var c=/(\-([a-z]){1})/g;"float"==b&&(b="styleFloat");c.test(b)&&(b=b.replace(c,function(a,b,c){return c.toUpperCase()}));return a.currentStyle&&a.currentStyle[b]?a.currentStyle[b]:null};return this});return n.getComputedStyle(a,null).getPropertyValue(b)}function t(a){a=a||c.clientHeight;var b=u(c);return Math.max(Math.floor(a/b),0)}function x(a){return u(c)*
a}function u(a){var b=s(a,"line-height");"normal"==b&&(b=1.2*parseInt(s(a,"font-size")));return parseInt(b)}function l(a){if(a.lastChild.children&&0<a.lastChild.children.length)return l(Array.prototype.slice.call(a.children).pop());if(a.lastChild&&a.lastChild.nodeValue&&""!=a.lastChild.nodeValue&&a.lastChild.nodeValue!=b.truncationChar)return a.lastChild;a.lastChild.parentNode.removeChild(a.lastChild);return l(c)}function p(a,d){if(d){var e=a.nodeValue.replace(b.truncationChar,"");f||(h=0<k.length?
k.shift():"",f=e.split(h));1<f.length?(q=f.pop(),r(a,f.join(h))):f=null;m&&(a.nodeValue=a.nodeValue.replace(b.truncationChar,""),c.innerHTML=a.nodeValue+" "+m.innerHTML+b.truncationChar);if(f){if(c.clientHeight<=d)if(0<=k.length&&""!=h)r(a,f.join(h)+h+q),f=null;else return c.innerHTML}else""==h&&(r(a,""),a=l(c),k=b.splitOnChars.slice(0),h=k[0],q=f=null);if(b.animate)setTimeout(function(){p(a,d)},!0===b.animate?10:b.animate);else return p(a,d)}}function r(a,c){a.nodeValue=c+b.truncationChar}d=d||{};
var n=window,b={clamp:d.clamp||2,useNativeClamp:"undefined"!=typeof d.useNativeClamp?d.useNativeClamp:!0,splitOnChars:d.splitOnChars||[".","-","\u2013","\u2014"," "],animate:d.animate||!1,truncationChar:d.truncationChar||"\u2026",truncationHTML:d.truncationHTML},e=c.style,y=c.innerHTML,z="undefined"!=typeof c.style.webkitLineClamp,g=b.clamp,v=g.indexOf&&(-1<g.indexOf("px")||-1<g.indexOf("em")),m;b.truncationHTML&&(m=document.createElement("span"),m.innerHTML=b.truncationHTML);var k=b.splitOnChars.slice(0),
h=k[0],f,q;"auto"==g?g=t():v&&(g=t(parseInt(g)));var w;z&&b.useNativeClamp?(e.overflow="hidden",e.textOverflow="ellipsis",e.webkitBoxOrient="vertical",e.display="-webkit-box",e.webkitLineClamp=g,v&&(e.height=b.clamp+"px")):(e=x(g),e<=c.clientHeight&&(w=p(l(c),e)));return{original:y,clamped:w}}})();


// CODE BEGINS HERE
$clamp(document.getElementById('toclamp'), {
  clamp: 3
});

div {
  width: 100px;
  height: 58px;
  border: 1px solid red;
  line-height: 20px;
}

<div id="toclamp">
  The quick brown fox jumps over the lazy dog.
</div>
<br />
<div id="noclamp">
  The quick brown fox jumps over the lazy dog.
</div>