CSS: limit element to 1 line

Question

I want to limit a element to display only 1 line of text, with the remainder hidden (overflow:hidden), without setting a specific height. Is this possible with just CSS?

Thanks.

Answer 1

If you are looking to disable text wrapping, use white-space: nowrap;.

Answer 2

p#foo {
    white-space:nowrap;
    overflow:hidden;
}

Answer 3

It is possible:

element (white-space: nowrap; overflow: scroll;)

Text parsed as HTML or XML is tokenized, which means all runs of whitespace are collapsed to a single space character. This means you will have a single line of text unless you specify something in addition to the overflow declaration that could cause your text to wrap.

EDIT: I failed to include the necessary write-space: nowrap property, otherwise the default is that a container will scroll vertically opposed to horizontally.