Safari Technology Preview 256 gives line-clamp a continue longhand
Iris Calderón
You clamp a card excerpt to three lines. It looks right. Then someone drops an absolutely positioned badge into the text after the cut, and the badge either hangs around below the ellipsis or never gets laid out at all. The clamp hid the lines and forgot about the rest of the box.
Safari Technology Preview 256 keeps working on that box. It came out on November 4 for macOS Golden Gate and macOS Tahoe and covers WebKit changes 323398@main through 324653@main. The interesting part is a change to what line-clamp actually is in this engine.
A shorthand with a longhand behind it
The key CSS note: WebKit added support for continue: collapse with line-clamp, and the line-clamp shorthand now sets it.
A second note in the same build renames a value. The auto value of the continue property is now normal, which the notes say matches the specification.
Put those together. line-clamp is a shorthand, and continue is one of the longhands it writes. That's the mechanism, and the rest of the release makes more sense once you see it that way.
Why the plumbing matters
Shorthands follow one cascade rule everywhere. Declaring the shorthand sets each longhand it covers. A later declaration of a single longhand overrides just that piece. So continue is now its own property in WebKit, with its own computed value, instead of behaviour buried inside one declaration.
That changes how you debug. When a clamp misbehaves, check continue in the computed styles alongside line-clamp. And if a test page from last month says continue: auto, that value has a new name now. Rename it.
The two values
/* Set for you by the line-clamp shorthand */
.excerpt {
continue: collapse;
}
/* The value WebKit used to call auto */
.excerpt-full {
continue: normal;
}
The notes stop at the values. They show no full clamping recipe, so read this as a map of what exists, not a pattern to ship.
What still slipped past the clamp
The line-clamp fixes from the last preview keep coming:
- A positioned
inline-blockafter the clamp point stayed visible. - An absolutely positioned box inside content after the clamp point wasn't laid out.
line-clamp: autonow accounts for collapsed block-end margins when it finds the clamp point, and finds that point before balancing content.- Layout inside a nested scroll container didn't update after its classic scrollbar disappeared, when
line-clampwas used with an absolutely positioned descendant.
All fixed. Notice the pattern. Positioned descendants show up three times. If your clamped components carry badges or overlays, this is the build to retest them in.
Grid got some love too. The grid layout engine now computes collapsed tracks for repeat(auto-fit), and empty repeat(auto-fit) tracks now collapse along with their gutters. If an auto-fit row in WebKit ever left you with a gap you couldn't explain, start your retest there.
Markers and palettes
Two smaller features, both about text. text-combine-upright now works on ::marker. A related fix moves outside list markers to the right place in vertical writing modes. Numbered lists in vertical text get better from both ends.
font-palette-mix() arrives on Cocoa platforms, and the notes describe it as letting you blend font color palettes. They give no syntax, so I won't guess at one. Cocoa only, per the notes.
Two fixes in the accessibility tree
List marker text generated with the content property wasn't exposed in the accessibility tree. It is now. If you generate marker text in CSS, sighted users saw it and assistive tech didn't, until this build.
The second fix is about nested frames. VoiceOver couldn't reach the content of an iframe nested inside an iframe with role="none" or role="presentation". Fixed.
Where support stands
This is one engine's preview build. The notes make no Baseline claim and neither do I. Treat continue: collapse and font-palette-mix() as things to try on a test page. The auto to normal rename is the only item that asks you to change code you might already have written.
What I want is a clamp you never think about. Positioned children hidden, margins respected, one property. This build gets closer. Try it on your worst card first.
Source: WebKit Blog (webkit.org)