Question

I am creating a tumblr theme and when you hover over a photo post it shows a description (example description shown below).

The designer only wants the first three lines of the description to show and place ellipses after after the description if it overspills 3 lines.

What’s the best way of going about this considering that a character count isn’t a good enough?

Thanks for the help…

http://brendan-rice.tumblr.com/

Example Photo Post

<div class="description photo" style="background-color: rgb(82, 69, 99);">
    <div style="">
        <input type="hidden" value="22186233340" class="id">
        <span class="title" style="">
        <p style="">
            <a href="http://staff.tumblr.com/post/21806558913/attention-west-coast-check-out-our-official" class="tumblr_blog" style="">staff</a>:
        </p>
        <blockquote style="">
            <p style="">
                <strong style="">Attention West Coast:</strong> Check out our <a href="http://www.tumblr.com/meetup/10107" style="">official Tumblr meetup</a> in Los Angeles on Tuesday 5/1! RSVP <a href="http://www.tumblr.com/meetup/10107" style="">here</a>.
            </p>
        </blockquote>
        <p style="">
            (Source: <a title="meetups" href="http://meetups.tumblr.com/post/21804989817/were-gonna-be-in-la-tuesday-night-come-grab-a" style="">meetups</a>)
        </p>
        </span>
        <div class="actions" style="">
            <span style="float: left;">
            <a target="_blank" href="http://www.tumblr.com/follow/penguinenglishlibrary " class="follow" style="">
            Follow </a>
            </span>
            <span style="float: right;">
            <a target="_blank" href="http://www.tumblr.com/reblog/22186233340/Pw5OgVj1" class="reblog" style="">
            Reblog </a>
            </span>
            <span style="float: right;">
            <a target="_blank" href="http://www.tumblr.com/reblog/22186233340/Pw5OgVj1" class="like" style="">
            Like </a>
            </span>
        </div>
    </div>
</div>

Answer 1

EDIT: just found this: http://dotdotdot.frebsite.nl/ which should solve your issue (jquery plugin)

As far as I know there is no way to make it wrap to three lines and then ellipsis.

If you just want the ellipsis after 1 line, use:

.class{
  width:200px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

However, you can do some tricky css to emulate it, though it won’t be perfect 100%. I’ve attached a jsfiddle with the emulation: http://jsfiddle.net/ET3F8/

Essentially, its wrapping to 3 lines and then becoming hidden. There is an element containing the ellipsis text (“…”) which is positioned at the bottom right of the container. It will cover the text and emulate ellipsis.

Issues:
– It will always display. You could perhaps use some JS to hide it if the text is not overflowing.
– It sometimes will break a letter.

Anyway, just an idea!