Wrapping and truncating text

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>

Enhanced use

Truncated

Use to truncate text to fit within a grid column on a single line. Any text beyond the grid border will be cropped and replaced with an ellipsis (three dots). The text only disappears visually, and it can still be read by screen readers.

Appearance

Default:

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

With .wb-elps:

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

Correct use

Compliance point(s):

  • Use primarily for hyperlinks to prevent word wrap (if height is a concern and .wb-eqht cannot be applied) or if it displays outside of a grid columns (when .nowrap is applied)
Incorrect use

Compliance point(s):

  • Do not use this styling for sentences, as it can hide information to a visual user
  • Do not use in place of .wb-eqht when trying to achieve equal height on a grid row
  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<p class="wb-elps">...</p>
Date modified: