docs: document the {' '} trick (#17806)

Hi!

I run into this issue today, and found the fix in
https://github.com/sveltejs/svelte/issues/16680#issuecomment-3229435832

I thought it would be a nice addition to the documentation (it's where I
looked first)

### Before submitting the PR, please make sure you do the following

- [ ] It's really useful if your PR references an issue where it is
discussed ahead of time. In many cases, features are absent for a
reason. For large changes, please create an RFC:
https://github.com/sveltejs/rfcs
- [x] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
- [ ] This message body should clearly illustrate what problems it
solves.
- [ ] Ideally, include a test that fails without this PR but passes with
it.
- [ ] If this PR changes code within `packages/svelte/src`, add a
changeset (`npx changeset`).

### Tests and linting

- [ ] Run the tests with `pnpm test` and lint the project with `pnpm
lint`

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
pull/17815/head
Gautier Ben Aïm 4 days ago committed by GitHub
parent fc67c9cfe9
commit d83e4be1f0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -682,6 +682,24 @@ Previously, Svelte employed a very complicated algorithm to determine if whitesp
- Whitespace between nodes is collapsed to one whitespace
- Whitespace at the start and end of a tag is removed completely
This new behavior is slightly different from native HTML rendering. For example, `<p>foo<span> - bar</span></p>` will render:
- `foo - bar` in HTML
- `foo- bar` in Svelte 5
You can reintroduce the missing space by moving it outside the `<span>`...
```svelte
<p>foo <span>- bar</span></p>
```
...or, if necessary for styling reasons, including it as an expression:
```svelte
<p>foo<span>{' '}- bar</span></p>
```
- Certain exceptions apply such as keeping whitespace inside `pre` tags
As before, you can disable whitespace trimming by setting the `preserveWhitespace` option in your compiler settings or on a per-component basis in `<svelte:options>`.

Loading…
Cancel
Save