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

Question

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

Answer 1

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
• 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 camplin
• 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 width and height fixed `
  `
• 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