0

I'm working on a video site at the moment and a lot of the titles are longer than they should be. The page layout breaks if the title is longer than 2 lines. This happens in many different places on the site.

By layout breaking I mean, it looks messed asymetric, things don't line up right. So what is the better way to handle these long strings. If I use truncation, then almost everything seems to get truncated and I have those "..." at the end of everything.

On the other hands setting a fixed height and using overflow hidden looks better but it obviously doesn't tell the user that there is more to the title and abruptly ends. So what is the better option do you guys think?

Improve this question

4 Answers 4

Reset to default
2

One thing I've done in the past is use a gradient image (or CSS3 gradient on a span) and absolutely position that over the right end of it, so the words fade out as they approach the end.

In addition to that, I often put a click event of some kind to expand on click or hover or something to reveal the rest of the title. Sometimes I do a tooltip, sometimes I expand the text itself... depends on the design.

But I've found that the gradient thing lets you know there's more without being too ugly.

Hope that helps.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

This is quite subjective, but I think a good example is what YouTube does. You'll see that with YouTube you cannot set a title longer than 100 characters. To me, that's a much more graceful solution rather than truncating and appending '...' or using overflow (as that's nasty IMO).

Improve this answer

Comments

0

you could either limit it serverside by the number of characters, or you could set the css overflow:hidden.

Ideally if possible I would limit it at the point of entry, setting a max length for the title input

Improve this answer

1 Comment

Proportional fonts make this difficult to find the right value. "WWWWWWWWWW" takes up more space than "lllllllllll".
0

I think the best thing to do is use the elipse '. . .' and have the title in the mouseover titletext. This doesn't limit your title lengths but allows for functionality and the preservation of layout. As graceful as it gets given the situation and very cross compatible.

Improve this answer

Comments