CSS word-break Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.examples {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: Arial, Helvetica, sans-serif;
}

.box {
  width: 260px;
  border: 1px solid #ccc;
  padding: 12px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.box h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
}

.box p {
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.box p.long {
  background: #f8f9fa;
  padding: 6px;
  border-radius: 4px;
}

.box.normal p.long {
  word-break: normal;
  overflow-wrap: normal;
}

.box.break-all p.long {
  word-break: break-all;
}

.box.keep-all p.long {
  word-break: keep-all;
}

.box.break-word p.long {
  word-break: break-word;
  overflow-wrap: anywhere;
}
</style></head><body><div class="examples">
  <div class="box normal">
    <h3>word-break: normal</h3>
    <p>This is a normal paragraph. It will break only at allowed break points between words.</p>
    <p class="long">ThisIsAReallyLongWordWithoutAnyHyphensOrSpacesThatWouldNormallyOverflowTheContainer.</p>
  </div>
  <div class="box break-all">
    <h3>word-break: break-all</h3>
    <p>This setting allows words to break anywhere if necessary to prevent overflow.</p>
    <p class="long">ThisIsAReallyLongWordWithoutAnyHyphensOrSpacesThatWouldNormallyOverflowTheContainer.</p>
  </div>
  <div class="box keep-all">
    <h3>word-break: keep-all</h3>
    <p>Keep-all prevents word breaks for CJK text. For non-CJK text it behaves like normal.</p>
    <p class="long">ThisIsAReallyLongWordWithoutAnyHyphensOrSpacesThatWouldNormallyOverflowTheContainer.</p>
  </div>
  <div class="box break-word">
    <h3>word-break: break-word</h3>
    <p>break-word is legacy; used with overflow-wrap to force breaks and avoid overflow.</p>
    <p class="long">ThisIsAReallyLongWordWithoutAnyHyphensOrSpacesThatWouldNormallyOverflowTheContainer.</p>
  </div>
</div></body></html>