to add ellipsis to a sentence that is too long you can use this method: http://jsfiddle.net/ArKeu/
that works great for widths but is it somehow possible to add ellipsis vertically too? that doesn't seem to work :(
does anyone know this, Thanks.
4
-
What would your desired result look like?Shad– Shad2011-08-09 22:59:11 +00:00Commented Aug 9, 2011 at 22:59
-
basically it cuts the text after 300 vertical pixels and adds ellipsis. Like in the first jsfiddlecmplieger– cmplieger2011-08-09 23:00:14 +00:00Commented Aug 9, 2011 at 23:00
-
But then, would the ellipsis fall outside of the parent element?Shad– Shad2011-08-09 23:04:33 +00:00Commented Aug 9, 2011 at 23:04
-
1well that's not the plan, that's why i'm asking :pcmplieger– cmplieger2011-08-09 23:23:01 +00:00Commented Aug 9, 2011 at 23:23
Add a comment
|
3 Answers
Currently there is no cross-browser CSS-only way to achieve such behavior.
You can do this now only in webkit-based browsers by using the -webkit-box and -webkit-line-clamp, see http://jsfiddle.net/ArKeu/7/
The css rule boils down to:
your-css-selector {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
}
Where the number value for -webkit-line-clamp is the maximal number of lines you want to be displayed.
3 Comments
Artur INTECH
text-overflow: ellipsis is unnecessary. -webkit-line-clamp adds an ellipsis by itself.
djsoteric
@ArturINTECH any word on what would replace webkit-box-orient? It's deprecated whereas it looks like line-clamp is going to eventually make it. Just trying to future proof my implementation as much as possible :)
UPDATE! UPDATE! UPDATE!
Since the time when I wrote that answer, Clamp.js seems to have cooled-off and died. The project still exists on github so you can check it out.
But, there is a better alternative here: ftellipsis. It is cross-browser.
Why should webkit browsers have all the fun?
This solution here is much more extensive, and provides support for other browsers as well.
http://reusablebits.com/post/2642059628/introducing-clamp-js (dead link)
2 Comments
devshorts
That link is dead, can you provide an alternate?
geisterfurz007
For what it's worth, ftellipsis doesn't seem to active either anymore (last commit August 2014).
CSS Overflow Module Level 4 is a W3C specification which, as of 2023-05-08, is in Working Draft state.
It defines a CSS property called line-clamp which accomplishes your goals. It is based on the earlier Webkit property, mentioned in kizu's answer; and as such, the evolving specification continues to be available in most browsers with the -webkit- prefix.
I will update this answer as the CSS Overflow Module Level 4 specification advances.
2 Comments
djsoteric
It looks like line-clamp is experimental but box-orient (which so far, for me, is required to use line-clamp) is deprecated. Is there some future version for that as well?
forresthopkinsa
@djsoteric When the spec is ratified,
box-orient will not be required. From the draft: "Implementations of the legacy -webkit-line-clamp property have not behaved identically to what is specified here. The historical behavior is quirky and less robust... The current design learns from the mistakes of that early experiment, and is intended to be sufficiently compatible with existing content that implementations can eventually be changed to follow to the specified behavior. If further adjustments are found to be necessary, they will be incorporated to this specification."