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

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

`

I made an image for this question to make it easier to understand.
Is it possible to create an ellipsis on a

with a fixed width and multiple lines?

I’ve tried some jQuery plugins out here and there, but cannot find the one I’m looking for. Any recommendation? Ideas?

Solutions/Answers:

Solution 1:

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.

Solution 2:

Try the jQuery.dotdotdot plugin.

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

Solution 3:

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


github.com/josephschmitt/Clamp.js


Here are a few more I did not investigate yet:


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:


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

AirBnb "read more" solution

Oh, and if you look for design inspirations:

Solution 4:

There is no such feature in HTML, and this is very frustrating.

I have developed a library to deal with this.

  • Multiline text-overflow: ellipsis
  • Multiline text with technologies that does not support it: SVG, Canvas for example
  • Have exactly the same line breaks in your SVG text, in your HTML rendering, and in your PDF export for example

Check out my site for screenshot, tutorial, and dowload link.

Solution 5:

Pure JS solution based on bažmegakapa’s solution, and some cleanup to account for people who try to give a height/max-height that is less than the element’s lineHeight:

  var truncationEl = document.getElementById('truncation-test');
  function calculateTruncation(el) {
    var text;
    while(el.clientHeight < el.scrollHeight) {
      text = el.innerHTML.trim();
      if(text.split(' ').length <= 1) {
        break;
      }
      el.innerHTML = text.replace(/\W*\s(\S)*$/, '...');
    }
  }

  calculateTruncation(truncationEl);

Solution 6:

I have a solution which works well but instead an ellipsis it uses a gradient. The advantages are that you don’t have to do any JavaScript calculations and it works for variable width containers including table cells. It uses a couple of extra divs, but it’s very easy to implement.

http://salzerdesign.com/blog/?p=453

Edit: Sorry, I did’t know that the link wasn’t enough. The solution is to put a div around the text, and style the div to control the overflow. Inside the div put another div with a “fade” gradient which can be made by using CSS or an image (for old IE). The gradient goes from transparent to the background color of the table cell and is a bit wider than an ellipsis. If the text is long and overflows, it goes under the “fade” div and looks “faded out”. If the text is short, the fade is invisible so there is no problem. The two containers can be adjusted to let one or multiple lines show by setting the height of the container as a multiple of the text line height. The “fade” div can be positioned to only cover the last line.

Related:  jQuery plugins vs widgets