u-no-wrap

[petesfrench]

Visual

Context

When content needs to be together to have sense, but also requires spacing, eg. a phone number "+44 203 656 5291"

I am using it here, but likely should be applied in a lot of places like this.

State

n/a

Progressive enhancement

n/a

Pattern example

.u-no-wrap {
  white-space: nowrap;
}

[syncronize-issues-to-jira]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15539.

This message was autogenerated

[bartaz]

Triage: this seems low effort and useful enough to be implemented in current architecture.

[bartaz]

Some other suggestions:

use   instead of spaces, to prevent it from wrapping on spaces.

Adrian suggests a more semantic approach, using a specific styling for telephone links:

<a href="tel:123-456-7890">123-456-7890</a>

a[href^="tel:"] {
    white-space: nowrap;
}

Lyubo: what if we want a telephone that is not a link?

Dani: we would need to specify guidelines where it can/should be use and where it shouldn't.

@petesfrench Do you know of any examples that are not a telephone?

WG: Validated, but we need to make sure we document it together with recommendation on the usage.