Disable Wrapping

This example demonstrates how to disable text wrapping inside an element:

HTML file: Displayed by browser:
<style>
p {
    white-space: nowrap;
}
</style>
<body>
<p>
This is some text in a paragraph.
Why would anyone want this?
This is some text in a paragraph.
Why would anyone want this?
This is some text in a paragraph.
Why would anyone want this?
This is some text in a paragraph.
</p>
</body>

This is some text in a paragraph. Why would anyone want this? This is some text in a paragraph. Why would anyone want this? This is some text in a paragraph. Why would anyone want this? This is some text in a paragraph.

This kind of messed up my table! I had set my table to 80% width, with each column being 50% of the table. However, putting no-wrapped text into the <td> tag, that just makes my percentages behave like they've been set to auto widths. Obviously, the none wrapped text is meant to fit on one line and takes priority over anything you set! The no-wrap declaration stretched my table to a width to accomodate that! So, maybe the no-wrapping is like that margin-right thing, which does not like to work inside tables? Well, I must say that this certainly was an interesting learning curve!

Back buttonTable of ContentsNext button