CSS: limit element to 1 line

Css Problem Overview

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?

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

use display block so it won't go beyond your parent element.

p#foo{
    white-space: nowrap;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
}

Solution 3 - Css

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

Solution 4 - Css

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

Solution 5 - Css

Sometimes, when you want to display elements to the left of truncated text, white-space: nowrap; does not help. Then this might be useful:

.truncated {
  max-height: 1.33em; /* Or whatever line height works for you */
  word-break: break-all;
  overflow: hidden;
}

Content Type	Original Author	Original Content on Stackoverflow
Question	Jourkey	View Question on Stackoverflow
Solution 1 - Css	austin cheney	View Answer on Stackoverflow
Solution 2 - Css	Alok	View Answer on Stackoverflow
Solution 3 - Css	meder omuraliev	View Answer on Stackoverflow
Solution 4 - Css	strager	View Answer on Stackoverflow
Solution 5 - Css	Juozas Kontvainis	View Answer on Stackoverflow