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
.nowrapto 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-eqhtcannot be applied) or if it displays outside of a grid columns (when.nowrapis 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-eqhtwhen 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: