css word wrap с эллипсисом

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. Но я должен предупредить вас, его результаты иногда нарушаются. Таким образом, я использовал немного хак, который включает в себя установку счетчика линии зажимать до 3 и настройка line-height CSS свойство элемента оберточной точно быть/^й высоты элемента.

// 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>