Quy tắc ngắt từ (word breaking rules) với CSS3

Thuộc tính word-break kiểm soát cách từ bị ngắt khi quá dài so với container.

Các giá trị

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    span {
      display: inline-block;
      font-weight: bold;
      font-size: 20px;
      margin-right: 20px;
    }
    div {
      width: 150px;
      border: 3px solid #3008c0;
      margin: 10px;
      padding: 10px;
      font-size: 18px;
      display: inline-block;
      vertical-align: top;
    }
    .normal { word-break: normal; }
    .break-all { word-break: break-all; }
    .break-word { word-break: break-word; }
  </style>
</head>
</body>
  <h1>Ví Dụ Quy Tắc Ngắt Từ</h1>
  <span>NORMAL</span>
  <span>BREAK-ALL</span>
  <span>BREAK-WORD</span>
  <br />
  <div class="normal">Supercalifragilisticexpialidocious</div>
  <div class="break-all">Supercalifragilisticexpialidocious</div>
  <div class="break-word">Supercalifragilisticexpialidocious</div>
</html>

Kết quả

• Normal: Từ dài tràn ra ngoài hộp (overflow)
• Break-all: Ngắt ở mọi ký tự: "Supercalifragilisti-cexpialidocious"
• Break-word: Ngắt cả từ nếu cần, ưu tiên giữ nguyên từ

Khuyến nghị hiện đại

Thay word-break: break-word bằng overflow-wrap: break-word (hay word-wrap cũ) để chỉ ngắt từ quá dài, không ngắt từ bình thường.