Presets

Text Wrap Mode

Typography Settings

Sample Text

Live Preview

text-wrap: balance
The quick brown fox jumps over the lazy dog on a sunny afternoon
text-wrap: wrap (default)
The quick brown fox jumps over the lazy dog on a sunny afternoon
i

Balance works best with headlines and short text (up to 6 lines). It equalizes line lengths for a more visually pleasing appearance.

Generated CSS

Basic Usage
.element {
  text-wrap: balance;
  text-align: left;
  font-size: 24px;
  line-height: 1.5;
  max-width: 400px;
}
Full Examples
/* Text Wrap Balance/Pretty Example */

/* Headlines with balanced wrapping */
h1, h2, h3 {
  text-wrap: balance;
  max-width: 25ch; /* Limit width for best results */
}

/* Body text with pretty wrapping */
p {
  text-wrap: pretty;
}

/* Prevent orphans in specific elements */
.no-orphans {
  text-wrap: pretty;
  max-inline-size: 65ch;
}

/* Balanced centered headlines */
.hero-title {
  text-wrap: balance;
  text-align: center;
  font-size: clamp(2rem, 5vw, 4rem);
  max-width: 20ch;
  margin-inline: auto;
}

/* Card titles */
.card-title {
  text-wrap: balance;
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Editable content with stable wrapping */
[contenteditable] {
  text-wrap: stable;
}

/* Feature detection */
@supports (text-wrap: balance) {
  .headline {
    text-wrap: balance;
  }
}

@supports (text-wrap: pretty) {
  .paragraph {
    text-wrap: pretty;
  }
}

/* Fallback for older browsers */
@supports not (text-wrap: balance) {
  .headline {
    /* Manually balanced with max-width */
    max-width: 20ch;
    margin-inline: auto;
  }
}
white-space vs text-wrap
/* white-space vs text-wrap comparison */

/* white-space controls all whitespace handling */
.white-space-normal {
  white-space: normal; /* Default: collapse whitespace, allow wrapping */
}

.white-space-nowrap {
  white-space: nowrap; /* No wrapping, collapse whitespace */
}

.white-space-pre {
  white-space: pre; /* Preserve whitespace and newlines, no wrapping */
}

/* text-wrap is more specific to wrapping behavior */
.text-wrap-balance {
  text-wrap: balance; /* Balance line lengths */
  white-space: normal; /* Can combine with white-space */
}

/* Use text-wrap for wrapping control */
/* Use white-space for whitespace handling */

/* Combined usage */
.code-block {
  white-space: pre-wrap; /* Preserve whitespace, allow wrapping */
  text-wrap: stable; /* Stable wrapping for editable code */
}

Rate this tool