79806335

Date: 2025-11-01 05:01:52
Score: 0.5
Natty:
Report link

As @Alohci suggested, I finally made it with line-break: anywhere.

<p>with white-space:break-spaces;</p>
<output style="display:inline-block;font-family:monospace;width:8ch;border: 1px solid black;white-space:break-spaces;line-break: anywhere;">123456  1234  7812  5678  345678</output>

According to the specification, The "missing" whitespace for white-space:pre-wrap and early wrap for white-space:break-spaces could be intentional.

4.1.1. Phase I: Collapsing and Transformation

  • If white-space is set to pre, pre-wrap, or break-spaces, any sequence of spaces is treated as a sequence of non-breaking spaces. However, for pre-wrap, a soft wrap opportunity exists at the end of a sequence of spaces and/or tabs, while for break-spaces, a soft wrap opportunity exists after every space and every tab.

Chromium chooses not to wrap lines before spaces.

4.1.2. Phase II: Trimming and Positioning

  1. If there remains any sequence of white space, other space separators, and/or preserved tabs at the end of a line
    • If white-space is set to pre-wrap, the UA must (unconditionally) hang this sequence. ...
    • If white-space is set to break-spaces, spaces, tabs, and other space separators are treated the same as other visible characters: they cannot hang nor have their advance width collapsed.

So, for white-space: pre-wrap, space sequences are hanging at the end edge of previous line; for white-space: break-spaces, lines are wraped early to avoid a hanging space. That's why I didn't get the expected layout.

To force the line to be wrapped anywhere, I shall use line-break: anywhere.

5.3. Line Breaking Strictness: the line-break property

anywhere : There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, ...

... it does have an effect on preserved white space, with white-space: break-spaces, it allows breaking before the first space of a sequence, which break-spaces on its own does not.

Reasons:
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @Alohci
  • Self-answer (0.5):
  • Low reputation (0.5):
Posted by: FaniX