u-no-wrap
Opened this issue · 3 comments
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;
}
Thank you for reporting us your feedback!
The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15539.
This message was autogenerated
Triage: this seems low effort and useful enough to be implemented in current architecture.
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.