CODEWITHSUNDEEP
html
aidanjacobson
aidanjacobson

Reputation: 2401

Prevent newline in div

If I were to have a div with a specified width, how would I prevent a new line when the content exceeds the parent div's width? Here is my HTML code:

<div style="width: 200"><p>Verrrrrrry loooooooong pppppppp ellllemmmmmmmmentttt</p></div>

Any help would be appreciated. Thanks!

Upvotes: 1

Views: 1069

Answers (3)

Mooseman
Mooseman

Reputation: 18891

Use white-space: nowrap:

div{
    overflow: hidden; /* Prevent text from overflowing div */
    white-space: nowrap; /* Prevent text from using more than one line */
}

Upvotes: 2

Stan Shaw
Stan Shaw

Reputation: 3034

Try this CSS:

overflow:hidden;
white-space:nowrap;

Should do the trick

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

You could simply use:

div {
    white-space: nowrap;
    overflow: hidden; /* assuming you don't want the <div> to stretch to accommodate */
}                     /* the width of the text */


div {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,0.5);
}
<div>This element has some text longer, by far, than the width of the page in which it is contained; it would be lorem ipsum but, honestly, I'd rather spend a few moments typing randomly, but continuously, than go find myself some of that lorem-goodness...</div>

References:

Upvotes: 4

Related Questions