What is the best UI/CSS combination when displaying strings of unknown length?

Question

I have a list of items that I am displaying in a floated list, with each item in the list at a fixed width so that there's two per row. What is the best practice to prevent this horrible thing from happening:

alt text http://x01.co.uk/floated_items.gif

Possibilites:

• Trim to a specified number of characters before displaying the data. Requires guesswork on how many characters will be "safe".
• Overflow: hidden. Hacky.
• Remove the background and just have a top border on each item.

Possible but silly:

• Have a scrollbar in each item by doing overflow: auto, this will look horrendous.
• Add a background image to the container. It's not guaranteed that there's always an equal number of items so this option is out.

Any help on this irritating issue appreciated!

Answer 1

Are you using a fixed font size, i.e. specified in px? If not you also need to consider the various text size options of each browser which is probably going to make the concept of trimming the string redundant. If it is fixed then perhaps seeing how many Ws you can fit in and restricting your text to that -3 and appending an ellipsis, not sure what this list is for so that's one approach.

Personally I'd probably use overflow:hidden as that covers all eventualities and ensures that it'll always keep your layout consistent.

I guess the last option would be to keep a tight control over what can be added to the list and prevent the problem occuring in the first place. Prevention better than cure as they say, although probably unhelpfully.