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-spaceis set topre,pre-wrap, orbreak-spaces, any sequence of spaces is treated as a sequence of non-breaking spaces. However, forpre-wrap, a soft wrap opportunity exists at the end of a sequence of spaces and/or tabs, while forbreak-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
- If there remains any sequence of white space, other space separators, and/or preserved tabs at the end of a line
- If
white-spaceis set topre-wrap, the UA must (unconditionally) hang this sequence. ...- If
white-spaceis set tobreak-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, whichbreak-spaceson its own does not.