Mit “polyfill” getaggte Einträge von rainboxx - Matthias Dietrich

text-overflow: ellipsis; is great for text lines that may be longer then the parent element, eg. for shop article names or user names. But there is currently no solution for paragraphs that are longer than the parent. Of course you can set overflow: hidden;, but that will just clip the content/text.

Today I stumbled upon a blog entry by David DeSandro in which he show the use of -webkit-line-clamp which "limits the number of lines of text displayed in a block element". Sadly this is only possible within WebKit browsers (Safari and Google Chrome).

Entering Clamp.js. Clamp.js is a small Javascript that mimics this behavior in other browsers and sets the appropriate CSS for supported browsers. All you need is:

$clamp(document.getElementById('clamp-this'), { clamp: 'auto' });

Works. Nice. Thank you, Joe.