With the introduction of the svelte/reactivity/window package (sveltejs/svelte#14660), we can notice CSS issues in the docs with such large non-wrappable titles.

After digging a bit into the CSS, I initially tried to solve this by using the overflow-wrap: break-word property. However, it doesn't really look good and is too "abrupt".

I then stumbled upon a StackOverflow answer, which suggested using the HTML element I never heard of called <wbr> (word break). It really looks like the right solution.

<!-- apps/svelte.dev/src/routes/docs/[...path]/+page.svelte#L69 -->
<div id="docs-content" use:legacy_details>
	<header>
		<Breadcrumbs breadcrumbs={data.document.breadcrumbs.slice(1)} />
		<h1>{@html data.document.metadata.title.replace(/\//g, "/<wbr>")}</h1>
	</header>

However, it requires interpreting HTML, and using {@html inside the <h1> tag also leads to rendering component-titles like <svelte:window>, which is definitely not what we want!

As a result, I don't know what the best solution is here, which is why I opened an issue instead of a PR.

Initial state	overflow-wrap	<wbr> after slashes

What do you think?