Elegantly display dynamic text in a fixed width & height area

Question

This may be an impossible question to answer but I'll put it out there anyway.

Basically whats an elegant way to handle dynamic text in a fixed width area.

See the example below... how would you display the entire text without going over the white box boundaries. Also consider that this is an element on a page with lots of the same elements, so having a variable height isn't an option as it would push out the layout of the rest of the page.

So far I've considered:

1. Limit the character count and just cut it off with ....
2. Cut off the text but use a title tag that will display the full text on mouseover
3. Dropdown onto a 2nd line and force a break on that row so items on the row below will line up
4. Place the text within the image on a sliding div thats visible on mouseover
5. Scrolling text (yes I even went there...)
6. Scroll bar... for 1 line? urgh...

I'd be fascinated with any thoughts people out there have on this.

Answer 1

Cutting of the text with an ellipsis would be my first idea as well. Alternatively you could make the text "disappear" in the background by placing a transparancy gradient on top of it, i.e. so that the text fades away. It's basically the same idea but a little more elegant from a design point of view. Adding a tooltip that displays the full text could be a good bonus.

All other options will screw up your design. If you break up the text into 2 lines, you need to foresee extra vertical space, if you enlarge the box so that the text fits yo need to foresee extra horizontal space. If you decrease the font size it will become unreadable. If you use a scrollbar you also need to foresee extra vertical space and it will look ugly. If you use scrolling text... you will be shot.

Ps.: If that text is often quite long, consider using non capitalized text. It will take less space and will be easier to read.

Answer 2

I'd just make sure you have a safe amount of height in the design and allow the lines to break naturally. I would not cut it off prematurely even if you use the title attribute. It would involve making sure the user knows they can mouse over the text, which could ugly up the text pretty good. I'd avoid scroll bars for such a small area at all costs and moving text never seems to go well.