Website store format: Style = "word-wrap: Break-word; Table-layout: fixed ;"

Recently, some customers have reported that the website shop format is disordered and the contact style is disrupted. I don't know why the form is seriously changed. I am tortured to view the template, there is no problem with the template, and there is no problem with viewing CSS. The percent sign used in the format is no problem in theory, but it is a mess for you.

Later, after some hard work, I used my account to test different shop templates and tested them one by one. Finally, Huang Tianyan did not feel the same. I tested the problem. The problem was found, but a new problem emerged, this is because the table form format string is too long,

According to the situation, I searched and usedTable-layout: fixed attribute. For details, refer to the details provided by Google:

Table-layout: Explanation of fixed attributes

If you want a table to be fixed in size, the text inside will be forcibly wrapped (especially when a long string of English text is separated by spaces ), the style: Table-layout: fixed. However, there will be some problems in Firefox. Refer to some Gmail practices and perform several tests to find a solution.

Example 1: (IE browser) General situation

Code: <Table border = 1 width = 80> <tr> <TD> abcdefghigklmnopqrstuvwxyz 1234567890 </TD> </tr> </table>

Effect:
We can see that width = 80 does not work, and the table is opened by characters.

Example 2: (IE browser) use the style table-layout: fixed

Code: <Style>. TBL {table-layout: fixed} </style> <Table class = TBL border = 1 width = 80> <tr> <TD> abcdefghigklmnopqrstuvwxyz 1234567890 </TD> </tr> </table>

Effect:
Width = 80 takes effect, but the table line breaks.

 

 

Example 3: (IE browser) use the style table-layout: fixed and nowrap

Code: <Style>. TBL {table-layout: fixed} </style> <Table class = TBL border = 1 width = 80> <tr> <TD nowrap> abcdefghigklmnopqrstuvwxyz 1234567890 </TD> </tr> </table>

Effect: width = 80 takes effect, and line breaks are also killed.

 

Example 4: (IE browser) use the style table-layout: fixed and nowrap when the value is fixed to the TD size.

Code: <Style>. TBL {table-layout: fixed} </style> <Table class = TBL border = 1 width = 80> <tr> <TD width = 20 nowrap> abcdefghigklmnopqrstuvwxyz 1234567890 </TD> <TD nowrap> limit 1234567890 </TD> </tr> </table>

Effect: Unfortunately, nowrap of the first td does not work.

 

Example 5: (IE browser) use the style table-layout: fixed and nowrap when the percentage is fixed to the TD size.

Code: <Style>. TBL {table-layout: fixed} </style> <Table class = TBL border = 1 width = 80> <tr> <TD width = 25% nowrap> abcdefghigklmnopqrstuvwxyz 1234567890 </TD> <TD nowrap> limit 1234567890 </TD> </tr> </table>

Effect: change to percentage, and finally get it done

 

Example 6: (Firefox browser) use the style table-layout: fixed and nowrap when the percentage of TD size is fixedEffect: Put Example 5 under Firefox, and then ft

 

Example 7: (Firefox browser) use the style table-layout: fixed and nowrap when the percentage is fixed to the TD size, and use the DIV

Code: <Style>. TBL {table-layout: Fixed }. TD {overflow: hidden ;} </style> <Table class = TBL border = 1 width = 80> <tr> <TD width = 25% class = TD nowrap> <div> abcdefghigklmnopqrstuvwxyz 1234567890 </div> </ TD> <TD class = TD nowrap> <div> abcdefghigklmnopqrstuvwxyz
1234567890 </div> </TD> </tr> </table>

Effect: The world is finally peaceful

 

Example 8: (Firefox browser) use the style table-layout: fixed and nowrap when the value is fixed to the TD size, and use the DIV

Code: <Style>. TBL {table-layout: Fixed}. TD {overflow: hidden;} </style>

Code: <Table class = TBL border = 1 width = 80> <tr> <TD width = 20 class = TD nowrap> <div> abcdefghigklmnopqrstuvwxyz 1234567890 </div> </TD> <TD class = TD nowrap> <div> abcdefghigklmnopqrstuvwxyz 1234567890 </div> </TD> </tr> </table>

Effect: nowrap does not work anymore.

However, when using it in different browsers, problems may occur again, and the display effect is neat and the display content is indeed overwritten. How can this problem be solved? I started searching again and can force line breaks, however, some words are separated and cannot be connected. Then, a word-wrap: Break-word is added to the form format. The details are as follows:

Word-wrap controls line breaks.

When break-word is used, a line break is forced. There is no problem with Chinese and no problem with English statements. However, long strings do not work in English.

Break-word controls whether words are disconnected.

Normal is the default condition, and English words are not separated.

Break-all, which is a broken word. When a word reaches the boundary, the next letter automatically goes to the next line. It mainly solves the problem of long strings in English.

Keep-All refers to continuous Words in Chinese, Japanese, and Korean. That is to say, in this case, word-wrap is not used, and the Chinese text will not wrap. (The English statement is normal .)

IE:

Use Word-wrap: Break-word; all are normal.

FF:

If none of the two are used, Chinese will not cause any problems. There are no problems with English statements. However, long strings may cause problems in English.

To solve the problem of long strings in English, word-wrap: Break-word; Word-break: Break-all; is generally used ;. However, this method causes the words in Common English statements to be disconnected (also in IE ).

At present, the main problem is that long strings of English and English words are disconnected. In fact, long strings of English are just a long word.

That is, should an English word be disconnected? It is obvious that the problem should not be broken.

For long strings of English, it is malicious and you don't have to worry about it. However, we also need to find some way to prevent it from making the container large.

With: overflow: auto; ie, the long string is automatically folded. FF, the long string will be covered.

Therefore, in summary, the best way is word-wrap: Break-word; overflow: hidden; instead of word-wrap: Break-word; Word-break: Break-all ;.

Word-wrap: Break-word; overflow: auto; no problem in IE. In ff, long strings will be covered by some content.

Add style = "word-wrap: Break-word; Table-layout: fixed;" to solve the above problem. I hope you will be interested !!!!!