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

Question

I have a list of items that I show in a popup list, with each item in the list having a fixed width, so there are two lines. What is the best practice to prevent this terrible thing:

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

Possibilites:

• Trim to a certain number of characters before displaying data. Guessing how many characters will be "safe" is required.
• Overflow: Hidden. Hacky.
• Remove the background and just get the top border for each element.

Perhaps, but stupid:

• You have a scroll bar in each element, doing overflow: auto, it will look awful.
• Add a background image to the container. This does not guarantee that there are always the same number of elements, therefore this parameter is absent.

Any help on this annoying issue is appreciated!

Answer 1

Do you use a fixed font size, i.e. specified in px? If not, you also need to consider different text size options for each browser, which is likely to make the concept of line cropping superfluous. If it is fixed, then perhaps by looking at how many Ws you can fit and limit your text to this -3 and add an ellipsis, you don’t know what this list is for, so there’s one approach.

Personally, I would probably use overflow: hidden, as it covers all possible events and ensures that it will always support your format.

I suggest that the last option would be to keep tight control over what can be added to the list and prevent the occurrence of the problem in the first place. Prevention is better than cure, as they say, although probably useless.

Answer 2

There are scenarios that help with this by comparing li in blocks of two and making them equal to the highest.

Usually, instead of thinking about what is best from the point of view of css, you should think about which presentation you want, then get css / JavaScript to achieve the desired effect.

If this is something you simply don’t want, consider using a gradient background image that selects the top of li and offers a block without actually filling it.

---

Adding a jQuery: Equalize Solution Link

Answer 3

One solution would be to have a PNG with an alpha characteristic that would slowly distort the text in the background color of your container, at the last 10 pixels or so. It would look good if some text were much shorter than long, but if the text was equal to the container, it would look silly.

Of course, combined with the display: hidden and white space: no-wrap

Answer 4

From an accessibility point of view, it’s not a good idea to just hide the heading, as it can hide content for people who increase font sizes due to poor vision. Your design should be able to swim in the face of poor resolutions or similar obstructions, even if it floats into something less pleasing to the eye.

Now, if I correctly understood your problem with the background image, I believe that your problem can be solved using the methods described in the ALA article on sliding doors , where the background image is expanded with content.

Answer 5

Here are some disputes for you .. use the table?

It looks like you have a data grid for me, will the table respond to this problem for you?

This also raises the question, do you really want the elements to be the same height or just have the same amount of black background? You can apply black to the background of the line, and then create a central white separator with borders and fields.

Answer 6

You can try:

ul li{ display:block; float:left; width:6em; height:4em; background-color:black; color:white; margin-right:1em; } ul{ height:100%; overflow:hidden; } div{ height:3em; overflow:hidden; background-color:blue; } 

I don’t know what a cross browser is. EDIT: This is the html that I assume:

 <div> <ul> <li>asdf <li>asdf trey tyeu ereyuioquoi <li>fdas dasf erqwt ytwere r <li>dfsaklñd s jfañlsdjf ñkljdk ñlfas <li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn </ul> </div>