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>

打印页面