CHAPTER 11 ■ SPACING CONTENTNowrap
Problem You want to prevent the browser from wrapping text to a new line. For example, you want to
keep together a phrase, a hyphenated word, or a small code snippet containing a
whitespace, such as
.
Solution The rule white-space:nowrap prevents text from wrapping. You can apply white-
space:nowrap to any inline element that you do not want wrapped.
Pattern SELECTOR { white-space:nowrap; }^
Location This pattern applies to any inline element. If you assign white-space:nowrap; to a block
element, it will be inherited by its child inline elements.
Disadvantages When the browser viewport is smaller than the nonwrapped text, the browser viewport
overflows, and the browser creates a horizontal scrollbar so the user can scroll to see all the
unwrapped text. Even though it looks like the viewport has been resized, it has not. It is still
the same width and height. All static, absolute, fixed, and floated elements are aligned and
positioned as if the unwrapped text had never overflowed. Since users do not like to scroll
horizontally, it is best to keep nowrapped text as short as possible.
Example The example prevents the text in four elements from wrapping. The first unwrapped
element contains a phrase that I wanted to stay in one line. The second unwrapped element
contains a hyphenated word that I did not want broken across two lines. Most major
browsers do not break at hyphens. The third unwrapped element is a code fragment that
contains whitespace that I did not want to break across two lines. The fourth unwrapped
element contains a large amount of unwrapped text that overflows the browser’s viewport.
This causes the browser to display horizontal scrollbars so the user can scroll to read the
unwrapped text.
Related to Preserved, Code; Overflow (Chapter 6); Flyout Menu, Layout Links (Chapter 17); Inline Alert
(Chapter 20)