HTML truncate content based on div height

Question

I have a div with width of 130px a height of 200px.

Various text content gets displayed in this div (I've written some JS to fade in and out different content). The problem is even though I've tried truncating the text to say 180 characters, sometimes the content loaded into this div may contain a picture (or it may not) or might contain some line breaks (or may not) so a fixed character count for truncating sometimes does not clip enough of the text (i.e. the line breaks or perhaps an image will have taken up more vertical space in the div).

Ideally I'd like to truncate and add an ellipsis to the content when it is about to go over the 200px height limit - is this possible? I've looked at the CSS text-overflow property...this seems to work only really for width based truncating (or is that an incorrect assumption?)

Perhaps there is a JS based solution or maybe calcuating how many characters and image (the image sizes ARE fixed) and line break will take up and truncating after that.

Any ideas are much appreciated.

Answer 1

I used dotdotdot jQuery plugin to solve a similar problem. Line breaks should not be an issue with dotdotdot but inserted images should have width and height atributes specified in html.

If you are generating content dynamically you could determine image dimensions server-side (e.g. getimagesize function if you are using PHP). If this is not an option you can initialize dotdotdot inside $(window).load() but this will probably show content without ellipsis till all the media on the page is loaded.

Answer 2

Here's a solution:

http://jsfiddle.net/2jCHg/2/

There's a dangling ellipsis container at the end of the text container. The ellipsis is hidden using JavaScript if the text fits the container. The <span> for the ellipsis has to have a background to occlude the original text. I used flat white in my example. You can optionally use a PNG with alpha transparency to occlude the text with a nice gradient (transparent to white).

You can optionally inject the ellipsis markup with your script to keep your original markup pristine.

It's also unfortunate that the ellipsis is right-justified instead of immediately following the last character that's displayed.

Markup:

<div class="container">
    <div class="summary">
        Your text goes here
    </div>
    <div class="ellipsis"><span>&hellip;</span></div>
</div>

Style:

.container {
    width: 200px;
    border: 1px solid #888;
    padding: 0.5em;
    line-height: 1.2em;
    margin-bottom: 10px;
}
.summary {
    height: 6em; /* adjust based on line-height * rows desired */
    overflow: hidden;
}
.ellipsis {
    height: 0;
    position: relative;
    top: -1.2em;
    text-align: right;
}
.ellipsis span {
    background: white; /* occlude text with background color */
    padding-left: 0.5em;
    position: relative;
    top: -0.25em;
}

Script:

$(".summary").each(function () {
    $(this).next().toggle(this.scrollHeight > this.offsetHeight);
});