css完美的断行？

——不存在的。但是可以相对不那么惨不忍睹。

结论

css中对文字的断行，相当坑爹。总算整出来一个怎么操都比较给力的版本：

就是让 word-break:break-all见鬼去吧，这个css不能很好适应中英文等等各种情况，有可能不断行。

要用就用word-wrap:break-word;，同时，表格等要注意固定下，就可以了。表格固定：table-layout: fixed。

断行测试

代码

<!doctype html>
<html lang="en">

  <head>
    <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="Keywords" content="关键词一，关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="Yvette Lau">
    <title>Document</title>
    <!--css js 文件的引入-->
    <style>

      .card-wrap,.line-table-wrap{
        background: #E4FFE9;
        width: 250px;
        padding: 20px;
      }

      .cell1{
        background-color: bisque;
      }
      .cell2{
        background-color: darkseagreen;
      }



      .line-table-wrap table {
        width: 100%;
        table-layout: fixed;/*防止table被撑开，文字过多，而不断行时，会撑开table以适应文字大小*/
        border: 1px solid #e6e6e6;
        border-collapse: collapse;

      }

      .line-table-wrap tr th, .line-table-wrap tr td {
        border: 1px solid #e6e6e6;
        padding: 0.5rem;
        white-space: normal;
      }


    </style>
  </head>

  <body>


    <strong>div断行测试：</strong>
    <p>word-break:break-all:</p>
    <div class="card-wrap">
      <div class="cell1" style="word-break:break-all">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div>        
      <div class="cell2" style="word-break:break-all">》》》》》》》》》》》》》》》》》》》》》》》》》》》》》</div>
    </div>


    <p>word-wrap:break-word:</p>
    <div class="card-wrap">
      <div class="cell1" style="word-wrap:break-word">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div>        
      <div class="cell2" style="word-wrap:break-word">》》》》》》》》》》》》》》》》》》》》》》》》》》》》》</div>
    </div>

    <p>同上，css3。overflow-wrap:break-word:</p>
    <div class="card-wrap">
      <div class="cell1" style="overflow-wrap:break-word">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div>        
      <div class="cell2" style="overflow-wrap:break-word">》》》》》》》》》》》》》》》》》》》》》》》》》》》》》</div>
    </div>


    <p>
      <strong>表格断行测试：</strong>
    </p>

    <p>word-break:break-all:</p>
    <div class="line-table-wrap">
      <table>
        <tr>
          <td  class="cell1" style="word-break:break-all">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</td>
        </tr>
        <tr>
          <td  class="cell2" style="word-break:break-all">》》》》》》》》》》》》》》》》》》》》》》》》》》》》</td>
        </tr>
      </table>
    </div>


    <p>word-wrap:break-word:</p>
    <div class="line-table-wrap">
      <table>
        <tr>
          <td  class="cell1" style="word-wrap:break-word">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</td>
        </tr>
        <tr>
          <td  class="cell2" style="word-wrap:break-word">》》》》》》》》》》》》》》》》》》》》》》》》》》》》</td>
        </tr>
      </table>
    </div>



  </body>

</html>

o了，就表格写法特殊点。
需要将table固定住，添加样式：
table-layout: fixed;

防止table被撑开，导致不换行。

代码效果预览：
https://thimbleprojects.org/mingyueyixi/438531/page/%E6%96%87%E6%9C%AC%E5%AF%B9%E9%BD%90/index.html

截图：
这里写图片描述

css完美的断行

css完美的断行？

结论

断行测试

相关属性：

代码

猜你喜欢