Support wrap-inside property for control of line breaks within boxes

[clagnut]

Description

There are some sequences of text whose lines you may want to break only at particular points, and preferably not at all. To achieve this you may resort to inserting non-breaking spaces ( ) to keep text together, but this is a very manual and fragile approach. You could be introducing problems brought on by automated translation, or end up with text disappearing off the side of a screen.

CSS provides a solution to this by way of the wrap-inside property. By default this is set to auto which means text will always wrap at the edge of its block using a suitable line break opportunity, such as a space between words. You can try to prevent text in a phrase from wrapping by applying:

wrap-inside: avoid;

You can use this property on any inline element, that is to say a tag such as <em> or <span> that is used to mark up a phrase rather than a block of text like a paragraph. For example, consider the following mark-up:

<header>
<span class="event">Association Typographique Internationale Conference</span>
&#8226; <time class="date">28 October 2026</time>
&#8226;	<span class="place">Sharjah, UAE</span>
</header>
```	

This is how it would ordinarily render:

`Association Typographique Internationale Conference • 28 October 2026 • Sharjah, UAE`

And on smaller screens might wrap like this:

Association Typographique Internationale Conference • 28 October 2026 • Sharjah, UAE

Or this:

Association Typographique Internationale Conference • 28 October 2026 • Sharjah, UAE

In these examples, you would want to keep the date and the venue intact. This would make the layout neater and the content more readily understandable. Apply the following rule to make that happen:

`.event, .date, .place { wrap-inside: avoid; }`

This would then change the layout on smaller screens to:

Association Typographique Internationale Conference • 28 October 2026 • Sharjah, UAE

Or this:

Association Typographique Internationale Conference • 28 October 2026 • Sharjah, UAE

Note that even though we applied `wrap-inside:avoid`  to the event name, it still wraps when there is not enough space. The value `avoid` usefully implies that the inline phrase should be kept intact when possible, but still wrap if it would prevent text from <dfn>overflowing</dfn> into the margin or off the side of the screen.

### Specification

https://www.w3.org/TR/css-text-4/#wrap-inside

### web-feature

Controlling Breaks Within Boxes: the wrap-inside property

### Test Links

_No response_

### Additional Signals

[Chrome bug](https://www.w3.org/TR/css-text-4/#wrap-inside)
[Webkit bug](https://bugs.webkit.org/show_bug.cgi?id=297394)
[Firefox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1983059)