CSS 属性

CSS overflow-wrap属性使浏览器能够在牢不可破的字符串中分割一行文本，以防止内容溢出其容器。此属性仅适用于内联元素。

属性值

  • normal: 行只能在正常的单词断点处中断（例如两个单词之间有空格）。

  • anywhere: 如果行中没有其他可接受的断点，则可以在任何位置中断长单词或 URL。

  • break-word: 如果行中没有其他可接受的断点，这会在任意点打断通常不可打断的单词。

适用范围

所有 HTML 元素。

语法

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

CSS overflow-wrap: anywhere

以下示例演示如何溢出换行属性可以分解一个长单词，具体取决于它的值 -

<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> 在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭1234567891012345678910。
      </p>
      <p class="overflow-wrap-break-word">
         <strong>overflow-wrap-break-word</strong> 在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭1234567891012345678910。
      </p>
      <p class="overflow-wrap-normal">
         <strong>overflow-wrap-normal</strong> 在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭1234567891012345678910。
      </p>
   </div>
</body>
</html>

CSS overflow-wrap: break-word

这个示例演示了如何使用溢出换行、断字、和连字符属性可以分解一个长单词，具体取决于它们的值 -

<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>
         在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，
         <i class="wrap-normal">typesettingindustryomnqwertyuiop</i>
         有创造性地学习，才能越重山，跨峻岭1234567891012345678910
   </p>
   <p>
      <span>overflow-wrap: anywhere</span><br>
         在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，
         <i class="wrap-anywhere">typesettingindustryomnqwertyuiop</i>
         有创造性地学习，才能越重山，跨峻岭1234567891012345678910
   </p>
   <p>
      <span>overflow-wrap: break-word</span><br>
      在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，
      <i class="wrap-break-word">typesettingindustryomnqwertyuiop</i>
      有创造性地学习，才能越重山，跨峻岭1234567891012345678910
   </p>
   <p>
      <span>word-break: break-all</span><br>
      在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，
      <i class="break-all">typesettingindustryomnqwertyuiop</i>
      有创造性地学习，才能越重山，跨峻岭1234567891012345678910
   </p>
   <p>
      <span>hyphens without lang attribute</span><br>
      在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，
      <i class="hyphens-auto">typesettingindustryomnqwertyuiop</i>
      有创造性地学习，才能越重山，跨峻岭1234567891012345678910
   </p>
   <p lang="en">
      <span>hyphens with English rule</span><br>
      在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，
      <i class="hyphens-auto">typesettingindustryomnqwertyuiop</i>
      有创造性地学习，才能越重山，跨峻岭1234567891012345678910
   </p>

   <p class="hyphens-auto" lang="fr">
      <span>hyphens with French rule</span><br>
      在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，
      <i class="hyphens-auto">typesettingindustryomnqwertyuiop</i>
      有创造性地学习，才能越重山，跨峻岭1234567891012345678910
   </p>
</body>
</html>