Perfect disconnection of css

css perfect break?

——Does not exist. But it can be relatively less tragic.

conclusion

In css, the broken lines of the text are rather pitiful. Finally awesome version of how to operate.

Let's go to hell with word break: break all. This css can't adapt well to Chinese and English and other situations. It may continue to run.

To use it, use word wrap: break word:, at the same time, pay attention to fixing tables, etc. Table layout: fixed.

Break line test

Related properties:

word-break:break-all
word-wrap:break-word
overflow-wrap:break-word

Code

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

  <head>
    <!--Website encoding format, UTF-8 International code, GBK or gb2312 Chinese encoding-->
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="Keywords" content="Key words 1 and 2">
    <meta name="Description" content="Website description content">
    <meta name="Author" content="Yvette Lau">
    <title>Document</title>
    <!--css js Introduction of documents-->
    <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;/*To prevent the table from being opened and too many words, and the table will be opened to adapt to the size of the text when the line continues*/
        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 Line break test:</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>Ditto, 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>Table break test:</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, on the special point of table writing.
You need to fix the table and add a style:
table-layout: fixed;

Prevent the table from being opened, resulting in no line wrapping.

Code effect preview:
https://thimbleprojects.org/mingyueyixi/438531/page/%E6%96%87%E6%9C%AC%E5%AF%B9%E9%BD%90/index.html

Screenshots:

Keywords: encoding less css3

Added by sKunKbad on Fri, 03 Apr 2020 15:25:30 +0300

Programming VIP