Smart overflow in HTML: is there any way to put ellipsis … with a link at the end to view entire content?
Jan 18, 2016
“Smart” overflow in HTML: is there any way to put ellipsis “…” with a link at the end to view entire content?
I have a <div> of constrained size, and I want to put multiline text in it, but if it’s going to overflow, I’d like to put a “…” at the end with a link to view the entire content on another page.
Hmm – looks like there’s a CSS text-overflow: ellipsis; but I don’t think I can put a link on the ellipsis.
this answer is really close but there are cases where if it just starts to overflow then only part of the ellipsis shows up.
library requirements: I can use jQuery (somewhat reluctantly), would prefer a no-framework-dependency cross-browser solution.
Here is a basic example that iterates over elements with a class of .smart-overflow. It adds a clickable a element with a class of ellipsis-linkonly if the content is clipped. The link has a click event listener that will reveal the hidden content that was hidden with overflow: hidden. This example only works for a single line. See the alternative example below for an approach that works for multiple lines in supported browsers.
In the example above, text-overflow: ellipsis requires white-space: nowrap in order to work which means that it only works for a single line.
If you want support for multiple lines, you can do something like this in supported browsers. If that doesn’t work, see the jQuery solution below for full browser support.
jQuery multi-line alternative with full browser support using this library.