[Original] explore CSS line feed

In a recent project, this project requires a lot of data output, and various types of data need to be generated in the table. This is a headache: long English string line breaks. After finding a lot of information, I finally used a property value for word-wrap and table-layout. Based on the actual situation of the project, I made some compatibility measures to solve the problem, I also shared it with my team, hoping to help you and improve your understanding of CSS long English or long field line breaks.

The line feed of long English or long fields is summarized as follows:

Three attributes to be understood

1. Word-wrap: the break-word line feed only supports consecutive English letters and numbers and is invalid in the table.

2. Word-break: The line feed in the break-all boundary supports short words including English letters and numbers, and is invalid in Firefox.

3. Table-layout: Fixed fixed table to start this attribute. The table supports word-wrap: Break-word; overflow: hidden.

How to Use DIV in a common container

Word-wrap: Break-word;

Suggestions on table usage in the container (Div)

Table-layout: fixed; Word-wrap: Break-word;

For details, see the PPT:

View More highlights

Download Attachment