Content commons keep long text or embedded controls inside their allocated space. They do not set a font, color, display mode, or fixed width.
| Class | Contract |
|---|---|
content-wrap |
min-inline-size:0 and overflow-wrap:anywhere |
content-inline-bounds |
min-inline-size:0 and max-inline-size:100% |
<div class="stack-row gap:3">
<span aria-hidden="true">↗</span>
<p class="content-wrap">A long project name can wrap inside this flex row.</p>
</div>
<div class="content-inline-bounds">
<label for="repository">Repository</label>
<input id="repository" class="input" name="repository" />
</div>content-wrap permits emergency word breaks; it does not truncate text or
hide overflow. Use content-inline-bounds when a child needs to fit the
available inline size while preserving its own wrapping policy. These
logical dimensions follow the element’s writing mode.
Do not replace an intentionally scrollable code block or table with clipped content. Give those regions contained scrolling and a keyboard path instead.