Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height

Question

Just a quick basic idea.

I was testing with the following markup:

<div id="fos">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>  
</div>

And CSS:

#fos { width: 300px; height: 190px; overflow: hidden; }
#fos p { padding: 10px; margin: 0; }

Applying this jQuery will accomplish the desired result:

var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

It repeatedly tries to remove the last word of the text until it reaches the desired size. Because of the overflow: hidden; the process remains invisible and even with JS turned off the result remains 'visually correct' (without the "..." of course).

If you combine this with a sensible truncation on the server-side (that leaves only a small overhead) then it will run quicker :).

Again, this is not a complete solution, just an idea.

UPDATE: Added a jsFiddle Demo.

Try the jQuery.dotdotdot plugin.

$(".ellipsis").dotdotdot();

Javascript libraries for "line clamping"

Note that "line clamping" is also referred as "Ellipsis on block of multi-lines" or "vertical ellipsis".

---

github.com/BeSite/jQuery.dotdotdot

• Pros: 2.5Kb (minified & gzipped), no big activity on repo but not bad either
• Cons: jQuery dependency, paid for commercial use (CC-BY-NC-4.0 license)
• my 2 cents: stackoverflow.com/questions/25187774/read-more-and-read-less-with-dotdotdot-jquery/29118739#29118739
• helpful stackoverflow.com/questions/19015945/jquery-dotdotdot-expand-truncate-text-onclick
• helpful gist.github.com/chiragparekh/c7e33dc749ed25544bde

---

github.com/josephschmitt/Clamp.js

• Cons: code repo barely active
• Pros: informative reusablebits.com/post/2980974411/clamp-js-v0-2-explanations-and-performance

---

Here are a few more I did not investigate yet:

• github.com/ftlabs/ftellipsis
• github.com/micjamking/Succinct
• github.com/pvdspek/jquery.autoellipsis and pvdspek.github.io/jquery.autoellipsis
• github.com/rviscomi/trunk8
• github.com/dobiatowski/jQuery.FastEllipsis
• github.com/theproductguy/ThreeDots
• github.com/tbasse/jquery-truncate
• github.com/kbwood/more

---

CSS solutions for line clamping

There are some CSS solutions, but the simplest uses -webkit-line-clamp which has poor browser support. See live demo on jsfiddle.net/AdrienBe/jthu55v7/

Many people went to great efforts in order to make this happen using CSS only. See articles and questions about it:

• css-tricks.com/line-clampin : 5 stars article on line clampin'
• mobify.com/blog/multiline-ellipsis-in-pure-css : CSS only
• cssmojo.com/line-clamp_for_non_webkit-based_browsers/ : "mimic" -webkit-line-clamp in non webkit browsers
• With CSS, use "..." for overflowed block of multi-lines
• Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height
• How to display only the first few lines of a div (clamping)?
• jquery limit lines in a paragraph and apply three periods to the end
• Limit text length to n lines using CSS

---

What I'd recommend

Keep it simple. Unless you have great amount of time to dedicate to this feature, go for the simplest & tested solution: simple CSS or a well tested javascript library.

Go for something fancy/complex/highly-customized & you will pay the price for this down the road.

---

What others do

Having a fade out like Airbnb does might be a good solution. It probably is basic CSS coupled with basic jQuery. Actually, it seems very similar to this solution on CSSTricks

Oh, and if you look for design inspirations:

• smashingmagazine.com/2009/07/designing-read-more-and-continue-reading-links/, from 2009 though...
• Dribbble probably has interesting designs...I could not find a way to gather them though (via search or tags), feel free to share a relevant link

You can use -webkit-line-clamp property with div.

-webkit-line-clamp: <integer> which means set the maximum number of lines before truncating the content and then displays an ellipsis (…) at the end of the last line.

div {
  width: 205px;
  height: 40px;
  background-color: gainsboro;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  
  /* <integer> values */
  -webkit-line-clamp: 2;
}

<div>This is a multi-lines text block, some lines inside the div, while some outside</div>

Found this short CSS-only solution in Adrien Be's answer:

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

As of March 2020 browser support is 95.3%, not being supported in IE and Opera Mini. Works on Chrome, Safari, Firefox and Edge.