SyntaxShelf

Wrap text

3 snippets in HTML & CSS

Also written as text wrap

HCHTML & CSS

<span> Inline Container

HC · Text Elements
Syntax
<span class="name">inline content</span>
Example
<p>Status: <span class="status-active">Active</span></p>

Note A span has no semantic meaning. Use it purely for styling a portion of text when no better semantic element exists.

Word Break & Overflow Wrap

HC · Typography
Syntax
word-break: normal | break-all | keep-all;
overflow-wrap: normal | break-word | anywhere;
Example
.comment {
  overflow-wrap: break-word;
}

.data-cell {
  word-break: break-all;
}

.cjk-text {
  word-break: keep-all;
}

Note overflow-wrap: break-word only breaks long words that would overflow their container. word-break: break-all breaks between any characters, even mid-word. Use overflow-wrap for most cases and word-break: break-all only for data like hashes or URLs.

Modern Text Wrapping

HC · Modern CSS
Syntax
text-wrap: wrap | nowrap | balance | pretty | stable;
Example
h1, h2, h3, h4 {
  text-wrap: balance;
}

article p {
  text-wrap: pretty;
}

.editable-field {
  text-wrap: stable;
}

Note balance evenly distributes text across lines (best for headings). pretty avoids orphaned words on the last line (best for paragraphs). stable prevents text from reflowing while the user is editing. These require no JavaScript and are progressive enhancements.

Frequently asked questions

How does HTML & CSS handle wrap text?
HTML & CSS covers this with 3 copy-ready snippets on this page. The "<span> Inline Container" snippet in HTML & CSS uses `<span class="name">inline content</span>`.
Which code does the HTML & CSS example use?
The "<span> Inline Container" snippet uses `<span class="name">inline content</span>`, from the Text Elements section of the HTML & CSS cheat sheet.
What other HTML & CSS snippets are shown for "wrap text"?
Besides "<span> Inline Container", this page also shows "Word Break & Overflow Wrap", "Modern Text Wrapping".
Is there anything to watch out for?
Yes. For "<span> Inline Container": A span has no semantic meaning. Use it purely for styling a portion of text when no better semantic element exists.

Browse all tasks by intent