[csswg-drafts] [css-break][css-text] `break` and `wrap` shorthands; forced wrapping (#13493)

Crissov has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-break][css-text] `break` and `wrap` shorthands; forced wrapping ==
The [CSS Fragmentation Module (css-break)](https://drafts.csswg.org/css-break/#breaking-controls) introduces three `break-` properties to control breaks before, after and inside blockish boxes. 

~~~~ ebnf
break-before =
break-after  = auto         | all
             | avoid        | always
             | avoid-page   | page | left | right | recto | verso 
             | avoid-column | column 
             | avoid-region | region
break-inside = auto 
             | avoid 
             | avoid-page 
             | avoid-column 
             | avoid-region
~~~~

For wrapping of text into lines, the `wrap-` properties in [CSS Text Module](https://drafts.csswg.org/css-text-4/#text-wrapping) are very similar. 
~~~~ ebnf
wrap-before = 
wrap-after  = auto 
            | avoid 
            | avoid-line | line 
            | avoid-flex | flex
wrap-inside = auto 
            | avoid
~~~~

In comparison with breaking, inside wrapping seems to lack specific `avoid-line` and `avoid-flex` keywords, but that is because it simply does not apply to flex items, and outside wrapping lacks the `always` or `all` keyword.
I had assumed that the notorious HTML `<br>` element would be a prime example for _forced wrapping_. Is that enough of a use case to add it?

There is also some redundancy in syntax definitions that could be cleaned up, then similarly applied systematically elsewhere:
~~~~ ebnf
break-before  =
break-after   = auto | all | always
              | page | <spread-break> | column | region
              | <avoid-break>
break-inside  = auto 
              | <avoid-break>
<avoid-break> = avoid 
              | avoid-page 
              | avoid-column 
              | avoid-region
<spread-break> = left | right | recto | verso

wrap-before  = 
wrap-after   = auto | line | flex
             | <avoid-wrap>
wrap-inside  = auto 
             | avoid
<avoid-wrap> = avoid | avoid-line | avoid-flex
~~~~

A new `break` shorthand property could support the values: `auto | <avoid-break> | before | after`, where the latter two expand to `always` in the respective longhand, or more generically either
`break = <'break-before'> [<'break-inside'>? <'break-after'>]?`
or `break = [<'break-before'> <'break-inside'>?]? <'break-after'>`, resetting all optional longhand values to initial `auto`.

Almost the same goes for a possible new `wrap` shorthand. 

~~~~ css
br {wrap: always}
~~~~

An issue with both possible shorthands is that there are other unaffected properties (and keywords) that include the terms _break_ and _wrap_, which could confuse authors. 

<details>
<summary>Related properties</summary>

~~~~ ebnf
text-wrap = <'text-wrap-mode'> || <'text-wrap-style'>
text-wrap-mode = wrap | nowrap
text-wrap-style = auto | balance | stable | pretty | avoid-orphans

overflow-wrap =
word-wrap  = normal 
           | break-word 
           | anywhere
line-break = auto | loose | strict 
           | normal
           | anywhere
word-break = break-all | keep-all | manual | auto-phrase 
           | break-word
           | normal

white-space = [normal = collapse wrap] 
            | [pre = preserve nowrap]
            | [pre-wrap = preserve wrap]
            | [pre-line = preserve-breaks wrap]
            | <'white-space-collapse'> 
            || <'text-wrap-mode'> 
            || <'white-space-trim'>

white-space-collapse = collapse | discard 
  | preserve | preserve-breaks | preserve-spaces 
  | break-spaces
white-space-trim = none 
  | discard-before || discard-after || discard-inner
~~~~

</details>

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13493 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 13 February 2026 13:24:58 UTC