CSS - overflow-wrap 屬性

CSS overflow-wrap 屬性使瀏覽器能夠在不可分割的字串內拆分一行文字，以防止內容溢位其容器。此屬性僅適用於內聯元素。

可能的值

normal − 行只能在正常的斷詞點（例如兩個單詞之間的空格）處斷開。
anywhere − 如果該行中沒有其他可接受的斷詞點，則這些斷詞會在任意位置斷開長單詞或 URL。
break-word − 如果該行中沒有其他可接受的斷詞點，則此屬性會在任意位置斷開通常不可分割的單詞。

應用於

所有 HTML 元素。

語法

overflow-wrap = normal|anywhere|break-word;

CSS overflow-wrap - anywhere 值

以下示例演示了overflow-wrap屬性如何根據其值斷開長單詞 -

<html>
<head>
<style>
   .container {
      display: flex;
   }
   .overflow-wrap-anywhere {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 100px;
      height: 150px;
      overflow-wrap: anywhere;
      margin-right: 50px;
   }
   .overflow-wrap-break-word {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 130px;
      overflow-wrap: break-word;
      margin-right: 50px;
   }
   .overflow-wrap-normal {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 130px;
      overflow-wrap: normal;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="overflow-wrap-anywhere">
         <strong>overflow-wrap-anywhere</strong> Lorem Ipsum is simply dummy text of the printing and typesettingindustryomnisdolorrty repellendus non-characteristic.
      </p>
      <p class="overflow-wrap-break-word">
         <strong>overflow-wrap-break-word</strong> Lorem Ipsum is simply dummy text of the printing and typesettingindustryomnisdolorrty repellendus non-characteristic.
      </p>
      <p class="overflow-wrap-normal">
         <strong>overflow-wrap-normal</strong> Lorem Ipsum is simply dummy text of the printing and typesettingindustryomnisdolorrty repellendus non-characteristic.
      </p>
   </div>
</body>
</html>

CSS overflow-wrap - break-word 值

此示例演示了overflow-wrap、word-break和hyphens屬性如何根據其值斷開長單詞 -

<html>
<head>
<style>
   p {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 11em;
      padding: 3px;
   }
   .wrap-normal {
      overflow-wrap: normal;
   }
   .wrap-anywhere {
      overflow-wrap: anywhere;
   }
   .wrap-break-word {
      overflow-wrap: break-word;
   }
   .break-all {
      word-break: break-all;
   }
   .hyphens-auto {
      hyphens: auto;
   }
   span {
      color: #D90F0F;
      font-size: 20px;
   }
</style>
</head>
<body>
   <p>
      <span>overflow-wrap: normal</span><br>
         Lorem Ipsum is simply dummy text of the printing and
         <i class="wrap-normal">typesettingindustryomnqwertyuiop</i>
         repellendus. non-characteristic words, Temporibus autem quibusdam et.
   </p>
   <p>
      <span>overflow-wrap: anywhere</span><br>
         Lorem Ipsum is simply dummy text of the printing and
         <i class="wrap-anywhere">typesettingindustryomnqwertyuiop</i>
         repellendus. non-characteristic words, Temporibus autem quibusdam et.
   </p>
   <p>
      <span>overflow-wrap: break-word</span><br>
      Lorem Ipsum is simply dummy text of the printing and
      <i class="wrap-break-word">typesettingindustryomnqwertyuiop</i>
      repellendus. non-characteristic words, Temporibus autem quibusdam et.
   </p>
   <p>
      <span>word-break: break-all</span><br>
      Lorem Ipsum is simply dummy text of the printing and
      <i class="break-all">typesettingindustryomnqwertyuiop</i>
      repellendus. non-characteristic words, Temporibus autem quibusdam et.
   </p>
   <p>
      <span>hyphens without lang attribute</span><br>
      Lorem Ipsum is simply dummy text of the printing and
      <i class="hyphens-auto">typesettingindustryomnqwertyuiop</i>
      repellendus. non-characteristic words, Temporibus autem quibusdam et.
   </p>
   <p lang="en">
      <span>hyphens with English rule</span><br>
      Lorem Ipsum is simply dummy text of the printing and
      <i class="hyphens-auto">typesettingindustryomnqwertyuiop</i>
      repellendus. non-characteristic words, Temporibus autem quibusdam et.
   </p>

   <p class="hyphens-auto" lang="fr">
      <span>hyphens with French rule</span><br>
      Lorem Ipsum is simply dummy text of the printing and
      <i class="hyphens-auto">typesettingindustryomnqwertyuiop</i>
      repellendus. non-characteristic words, Temporibus autem quibusdam et.
   </p>
</body>
</html>

列印頁面