text-wrap & Overflow-wrap

text-wrap & overflow-wrap

Control HOW text breaks and wraps inside boxes.

overflow-wrap

Break a long word so it doesn't leak outside:

p {
  overflow-wrap: break-word;   /* long words break if needed */
}

word-break

More aggressive: break anywhere if needed:

p.code {
  word-break: break-all;
}

hyphens

Let the browser hyphenate naturally (needs lang set in HTML):

p {
  hyphens: auto;
}

text-wrap modes (modern)

h1 {
  text-wrap: balance;    /* balances lines, pretty for headings */
}
p {
  text-wrap: pretty;     /* avoids lonely single words (widows) */
}

Practical line clamp

Number of lines to show before truncating:

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

TL;DR

• overflow-wrap: break-word breaks long words.
• hyphens: auto hyphenates naturally.
• text-wrap: balance balances headings, pretty avoids widows.
• -webkit-line-clamp shows exactly N lines then cuts.