I want to prevent hyphenation/line breaking of words containing hyphens (hyphenated compounds). Some common examples of hyphenated compounds in English are , , and .

Why?

This behavior is important for documents that prioritize legibility over aesthetics, such as:

• highly technical documents¹
• documents that will primarily be read out loud
• pedagogical documents

These documents may want to apply the behavior to the entire document, not on a case-by-case basis.

¹ This very spec once faced a similar issue in which unwanted hyphenation led to confusion: #2307

Current status

CSS Text Module Level 3 does not define what hyphenation opportunities are:

Hyphenation occurs when the line breaks at a valid hyphenation opportunity…. CSS Text Level 3 does not define the exact rules for hyphenation….

Under hyphens, it says:

none

Words are not hyphenated, even if characters inside the word explicitly define hyphenation opportunities.

However, hyphens: none does not give the expected result in most browsers.
For example, see how Chrome 70/Mac renders this JSFiddle:

I am concerned that the current spec gives authors very little control over a simple display requirement. For example, it never mentions the behavior of U+002D HYPHEN-MINUS, the most widespread hyphen character by far, even once.

Some workarounds

Wrap all hyphenated compounds in <span style="white-space:nowrap;"> or <nobr> (nonstandard).

Cons:

• Adds lots of unnecessary, presentational markup

Surround all hyphens with U+2060 WORD JOINER.

Cons:

• Affects searching and copying

Replace all hyphens with U+2011 NON-BREAKING HYPHEN.

Cons:

• Affects searching and copying
• Affects display; may look very ugly depending on the font (or fallback font)
  • Few fonts have a glyph for U+2011 (379 out of 3426 on my system do).
    Even if they do, U+2011 may not look identical to U+002D or U+2010.

The Unicode Line Breaking Algorithm (UAX 14) recommends this method, but it seems rare in practice:

2011 NON-BREAKING HYPHEN

This is the preferred character to use where words need to be hyphenated but may not be broken at the hyphen. Because of its use as a substitute for ordinary hyphen, the appearance of this character should match that of U+2010 HYPHEN.

Possible solutions

1. Define “hyphenation opportunities”
2. Re(de)fine hyphens: none
3. Add a brand new value, such as hyphens: none-including-hyphens

Questions

1. Does this affect CSS Text Module Level 3 or Level 4, or neither?
2. Will it impact the Last Call?

I can’t find any previous discussion on this topic; sorry if it’s a duplicate.

Thank you for considering this feedback – it’s my first time engaging with the standards process.

Further reading

• StackOverflow: No line-break after a hyphen (▲293, 2011)
• StackOverflow: How to prevent line break at hyphens on all browsers (▲80, 2012)
• StackOverflow: Is it possible to prevent linebreaks between hyphenated words in CSS? (▲1, 2018)
• Welling Guzmán: Prevent line-break with hyphenated words (2015)
• CSS-Tricks: Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc) (2018)

  Unfortunately, hyphen: none will still break words at hyphens (an explicitly defined hyphenation opportunity) even though the spec says it shouldn’t.

• [css-text-4] Hyphenate only overflowing words? #616, [css-text-3] hyphenation priority #618, [css-text] automatic hyphens should repect all kinds of manual hyphens #1040
• CSSWG: Minutes Telecon 2016-11-02: Hyphenation Priority (2016)
• Jukka Korpela: Word division in IE and other notes on the nobr markup and on suggesting possible "word" breaks (2000)
• dotCSS 2018: Florian Rivoal: Line breaking (2018)
• Google Docs Help Forum: Insert non-breaking space/hyphen (2010)
  Note that Google Docs renders hyphens as non-breaking by default in its browser view.
• Eric Meyer: Where to Avoid CSS Hyphenation (2012)