How to ensure that a line of text of a certain width never wraps?

I have some divs with ul > li lists in them. Each item should be one line tall and should not wrap. Ideally, ellipses ... should be inserted for lines that would otherwise wrap: these li items should be prevented from wra开发者_C百科pping.

Is it possible to accomplish this with through a combination of css and jQuery?

Add text-overflow: ellipsis.

Unfortunately, it's not supported by Firefox.

Check out this solution using jQuery to decrement the length of the string until it fits inside the desired dimension. http://jsfiddle.net/3jwLU/

You can use CSS3 text-overflow property.

If that's not an option you have a lot of jQuery plugins that do what you want. Just search for ellipses in jQuery plugins page...