demo · v150

Wrapped Inline

The motivating case from the CSSWG thread: two adjacent inline links that wrap to two lines. Without space-skipping, the end-side space of the first link gets an underline that joins it visually to the next link. Compare all four values side by side.

Each card below contains the same paragraph with an underlined inline span that wraps across a line break. Resize the sample width and watch the logical start and end edges of the highlighted span recalculate at different wrap points.

288px
Measuring wrapped inline boxes…

none — baseline

Read the original explainer thread on csswg-drafts for the full motivation.

all — skip both ends

Read the original explainer thread on csswg-drafts for the full motivation.

start — skip start edge

Read the original explainer thread on csswg-drafts for the full motivation.

end — skip end edge

Read the original explainer thread on csswg-drafts for the full motivation.

checking support…

a.link {
  text-decoration: underline;
  /* one of: none | all | start | end | start end */
  text-decoration-skip-spaces: all;
}

why this is the motivating case

CSSWG issue 3393 used Chinese punctuation and adjacent underlined links as the original motivation: two side-by-side underlined elements ended up looking like they shared a single underline because the trailing space picked up a stroke. The pre-shipping behaviour was a heuristic; this property makes it author-controllable.

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗