CSS text-wrap Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Container and general styles */
.container {
  max-width: 520px;
  margin: 28px auto;
  padding: 18px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #f5f7fb;
  border-radius: 10px;
  color: #0f172a;
}

h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
  color: #0b1220;
}

.example {
  margin-bottom: 12px;
}

.label {
  font-size: 0.85rem;
  color: #334155;
  margin-bottom: 6px;
}

p {
  margin: 0;
  padding: 12px;
  background: #ffffff;
  border-radius: 8px;
  line-height: 1.35;
  font-size: 1rem;
  box-shadow: 0 1px 0 rgba(2,6,23,0.04) inset;
}

/* Demonstrate the text-wrap property */
.balanced {
  /* Preferred modern property value  -  asks the UA to balance line breaks */
  text-wrap: balance;
  /* WebKit prefix for some implementations */
  -webkit-text-wrap: balance;
}

/* The normal paragraph shows default wrapping for comparison */
.normal {
  /* no special text-wrap; behaves as the browser default */
}
</style></head><body><div class="container">
  <h2>Text-wrap: balance  -  comparison</h2>

  <div class="example">
    <div class="label">With text-wrap: balance</div>
    <p class="balanced">This is a long sentence that demonstrates how the CSS text-wrap property balances line breaks across multiple lines to produce more even, readable line lengths in a constrained container.</p>
  </div>

  <div class="example">
    <div class="label">Normal wrapping (default)</div>
    <p class="normal">This is a long sentence that demonstrates how the CSS text-wrap property balances line breaks across multiple lines to produce more even, readable line lengths in a constrained container.</p>
  </div>
</div></body></html>