Login

Recent searches

No recent searches

Search options

Not available on mastodon.xyz.
mastodon.xyz is one of the many independent Mastodon servers you can use to participate in the fediverse.
A Mastodon instance, open to everyone, but mainly English and French speaking.

Administered by:

Server stats:

824
active users

mastodon.xyz: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.4

Doug Webb

TIL `box-decoration-break`

> ... specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.

My use case: back-ground effects applied to text 'chopped' when the text wrapped. Using `box-decoration-break: clone` gave desired effect

Only supported for inline elements though! `-webkit` variant required for now!

(P.S. I'd sure be glad for upvotes on my SO answer so I can just comment next time stackoverflow.com/a/77272442/1 🙏 )

Title text has an aquamarine background with rounded corners. However, because the view is on mobile, the title is wrapped onto three lines. Where the text is wrapped, there is no padding, leading the the background starting and stopping exactly where the text starts and stops. Additionally, the intermediary corners are sharp.
The same title text and background, wrapped onto three lines, except here the padding is conserved and the corners are rounded at the additional sections.
Oct 11, 2023, 11:25 AM·Public·Web
1boost·5favorites
Public
Koos Looijesteijn

@douginamug thanks for sharing that, I immediately added it to our website where our fancy shadow-enhanced focus styles looked broken on links spanning multiple lines. You've got my upvote!

ExploreLive feeds
About