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)

[github-actions[bot]]

This comment was automatically generated based on the information you provided. Please don't edit it.

No web features (from the web-features project) were found in your proposal. If your proposal doesn't correspond to a web feature, that is fine.
Otherwise, please update your initial comment to include web-features: <feature-id>. To find feature IDs, use the web-features explorer.

[coreyworrell]

I understand that this addresses inline elements, but just as a reference, your example can typically be handled similarly right now by using inline-block: .event, .date, .place { display: inline-block; }

[clagnut]

I understand that this addresses inline elements, but just as a reference, your example can typically be handled similarly right now by using inline-block: .event, .date, .place { display: inline-block; }

Not quite. The final example shows the event name wrapping with the date following directly afterwards on the same line. This wouldn't happen with inline-block - the date would begin on a new line which is not desired in this case. With inline-block applied as you suggest, the final example renders as:

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

[coreyworrell]

Right, I didn't mean to imply it was sufficient replacement, just an alternative that can work in some situations currently. I would think text-wrap: balance may help in cases too.

Going off topic even further, the use case for character-separated (bullet, pipe, etc) items that hide/show separator depending on the wrapping would also be great. Have to resort to some "hacks" now like https://chriskirknielsen.com/blog/inline-lists-with-conditional-separators/

[foolip]

I tried git grep -l wrap-inside in WPT and it looks like there are no tests for this.