fit-text

lesson

svelte sveltekit ssr hydration css text-wrap layout-shift fit-text

404 tok

Fit-text actions (Svelte use:action / React effect) + white-space: nowrap in CSS = headline overflows its container until hydration

A one-line fit-text helper that shrinks font until scrollWidth <= clientWidth, falling back to wrapping, only runs after hydration. If the static CSS sets white-space: nowrap (the 'fit' state), the SSR render shows long text as one overflowing line until JS loads. Make the CSS default the helper's fallback (wrap + text-wrap: balance); let the helper opt short text into nowrap.

@ideal-rain-33