Whitespace/No wrap

Table of contents

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to prevent text from wrapping to the next line.

Design and coding

Basic use

Default

Use to control where and how words wrap within a line of text.

Appearance

Default:

This year's deadline to filing your taxes is April 30.

With .nowrap:

This year's deadline to filing your taxes is April 30.

Correct use

Compliance point(s):

  • Use to prevent content such as telephone numbers, postal codes, mathematical equations, dates and French punctuation (colons, brackets and so forth that require spaces) from wrapping over multiple lines
  • Remember that the page is responsive to the width of the browser
    • Text wraps at different points on different devices and viewports
    • Add .nowrap to suit the different resolutions
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use to wrap complete sentences
  • Do not use for non-text information
Code
<p>... <span class="nowrap">April 30</span>.</p>
Date modified: