Css word wrap with ellipsis

Question

Using only CSS, I want both word wrapping and then ellipsis as soon as the container is filled vertically. According to studies, I can only have an ellipsis, if white-space: nowrap- this will give me only one line.

A context is a parent div with a known height and variable width, with a child element athat should always center itself vertically if it is not in max-height: 100%.

It seems that it should work if display: tablethe parent, and display: table-cell, and max-height: xxx, text-overflow: ellipsisin the child declared.

I don’t think it asks much, but it’s late, and I can miss something. Is there a website called still-cant-be-done-in-html5.com?

Fiddle

Answer 1

There is only a webkit function called “line snap” that can achieve what I think you are looking for. Unfortunately, it is non-standard and there are currently no plans (at least I know) to make it part of any standard.

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

This will be done using the following CSS:

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

Using this code, if the content of an element fills more than 3 lines with text, it will be disabled on the third line using ellipsis.

There are several different JavaScript libraries that try to perform similar actions, which you can see in the link included in this answer. Unfortunately, using standard CSS, text-overflow: ellipsis is limited to only one line.

, W3C " " , , , , - .

Answer 2

, CSS.

Clamp.js. , . , 3 line-height CSS : ¹/ ₃ ^rd .

// Copying Clamp.min.js here because we cannot execute RAW file from github as it 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>

Hide result