Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 11 ■ SPACING CONTENT


Nowrap


HTML


<h1>Nowrap</h1>
<div>
<p>You can keep a phrase together using <code>nowrap</code>, such as
<span class="nowrap">DO NOT BREAK THIS ACROSS TWO LINES!</span></p>

<p>You can use nowrap to keep some browsers from breaking a hyphenated word
across two lines, such as the following word:
<span class="nowrap">super-cali-fragilistic-expi-ali-docious!</span></p>

<p>You can keep together a small code snippet containing a space, such as
<code class="nowrap"><br /></code>.</p>
<p>Notice how it breaks across two lines when <code>nowrap</code>
is <em>not</em> applied to it: <code><br /></code>.</p>

<p class="nowrap">Be aware that nowrapped text can overflow its container. This
does not affect the width of other elements, but it may cause a browser to
display a horizontal scrollbar requiring users to scroll to see the text.</p>
</div>

CSS


.nowrap { white-space:nowrap; background-color:gold; }
Free download pdf