CSS line-break Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica', Arial;
  background: #f6f7f9;
  color: #111;
  padding: 24px;
}

.container {
  max-width: 760px;
  margin: 0 auto;
}

h1 {
  font-size: 20px;
  margin-bottom: 14px;
}

.example {
  margin-bottom: 18px;
}

.example h2 {
  font-size: 14px;
  margin: 8px 0;
  color: #2b2b2b;
}

.sample {
  width: 340px; /* narrow box to force wrapping */
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e0e4e8;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(16,24,40,0.03);
  font-size: 15px;
  line-height: 1.45;
  white-space: normal;
  word-wrap: break-word;
}

/* Different line-break behaviors */
.line-auto {
  line-break: auto;
}

.line-loose {
  line-break: loose;
}

.line-normal {
  line-break: normal;
}

.line-strict {
  line-break: strict;
}
</style></head><body><div class='container'>
  <h1>CSS line-break examples</h1>

  <div class='example'>
    <h2>line-break: auto</h2>
    <div class='sample line-auto'>
      <p>这是一个用于测试换行行为的示例文本。This is a sample text to demonstrate line-break behavior. 混合中文、English 和日本語の長い文章を含みます。</p>
    </div>
  </div>

  <div class='example'>
    <h2>line-break: loose</h2>
    <div class='sample line-loose'>
      <p>这是一个用于测试换行行为的示例文本。This is a sample text to demonstrate line-break behavior. 混合中文、English 和日本語の長い文章を含みます。</p>
    </div>
  </div>

  <div class='example'>
    <h2>line-break: normal</h2>
    <div class='sample line-normal'>
      <p>这是一个用于测试换行行为的示例文本。This is a sample text to demonstrate line-break behavior. 混合中文、English 和日本語の長い文章を含みます。</p>
    </div>
  </div>

  <div class='example'>
    <h2>line-break: strict</h2>
    <div class='sample line-strict'>
      <p>这是一个用于测试换行行为的示例文本。This is a sample text to demonstrate line-break behavior. 混合中文、English 和日本語の長い文章を含みます。</p>
    </div>
  </div>
</div></body></html>