demo · v130

Stable Text Wrap

text-wrap: stable prevents lines above the editing cursor from reflowing as you type at the end of a block. No more content jumping when you append text — the existing lines stay exactly where they are.

Note: CSS.supports('text-wrap', 'stable') returned false in this browser. The demo will still run, but both panels may behave identically. Chrome 130+ is required for text-wrap: stable.
text-wrap: stable stable
Type here →
reflows detected: 0
text-wrap: wrap default
Type here →
reflows detected: 0

What is happening

Both panels start with the same paragraph of text. Press "Prepend “Lorem ”" to insert a word at the very beginning of both. With text-wrap: wrap (right panel), the engine re-lays out all lines greedily, so existing line breaks shuffle. With text-wrap: stable (left panel), lines above the last line are locked — only the final line is allowed to absorb the change. The earlier lines don't jump.

The reflow counter increments each time the browser reports that the element's rendered clientHeight changes — a proxy for visible line-break shifts.

/* Chrome 130 — spec-aligned text-wrap values */

/* Prevent reflow of existing lines when appending text */
.editor {
  text-wrap: stable;
  /* Equivalent longhand: */
  /* text-wrap-mode:  wrap;   */
  /* text-wrap-style: stable; */
}

/* Default greedy wrapping (may reflow on every keystroke) */
.editor-default {
  text-wrap: wrap;
  /* text-wrap-style: auto; — same thing */
}

/* Feature detection */
@supports (text-wrap: stable) {
  .rich-editor { text-wrap: stable; }
}

see also