---
title: "Let the browser balance line breaks · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/interface/text-wrap
updated: 2026-10-20
licence: "All rights reserved"
---

# Let the browser balance line breaks

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Interface](https://agentwranglers.se/playbook/website/interface)
- Rule: Use `text-wrap: balance` on headings and `text-wrap: pretty` on paragraphs, instead of manual line breaks.
- How: Add the two rules to your stylesheet. Remove any `<br>` used only to break lines. Browsers that lack `pretty`, such as Firefox in 2026, ignore it and wrap normally.
- Check: The stylesheet contains both rules, and a build gate finds no `<br>` inside any heading.

Example:

```css
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/interface/text-wrap`.

- Previous: [Let parts fit the space they get](https://agentwranglers.se/playbook/website/interface/container-queries)
- Next: [Define every colour once](https://agentwranglers.se/playbook/website/interface/colour-as-tokens)
- [Interface](https://agentwranglers.se/playbook/website/interface)