Wrap text

<span class="name">inline content</span>

<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: normal | break-all | keep-all;
overflow-wrap: normal | break-word | anywhere;

.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.

text-wrap: wrap | nowrap | balance | pretty | stable;

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.