Question

I have a row (implemented with a div), which has a fixed width and height. The row contains three elements (in spans) of which the first two are fixed width. The third element in the row contains a span and some text. The problem is that when the text is too long, the entire span drops down to the next line. How can I prevent this behavior to have as much of that span display on the line as possible.

Constraints:

1. The whatever is too long should overflow to the right.
2. This needs to be a css solution only, no javascript/jQuery
3. The html has to stay the same (as per 2).

Here is a jsFiddle to see what I mean and play with to your liking.

http://jsfiddle.net/59YU5/1/

Thanks!

Answer 1

Not sure I fully understood what you want, but try adding white-space: nowrap; to the problematic span.

EDIT2

jsfiddle here