1. You set the width of the table, that is, give the table a width value (a numerical value, not a percentage) div{ div{ //word-break sets forced line breaks; normal text rules for Asian and non-Asian languages, allowing line breaks within words div{ 3. To sum up, as long as the following sentences are defined in CSS, the webpage can be guaranteed not to be opened again. table{table-layout: fixed;} Note: 1. The first table{table-layout: fixed;}, this style can make the table automatically wrap when there are characters such as !!! (exclamation point). 2.td{word-break: break-all}, generally it is OK to use this sentence, but in some special cases it will still break, so you need to add the following sentence (word-wrap: break-word;) It can be solved. This style allows some consecutive English words in the table to wrap automatically. word-break: normal | break-all | keep-all parameter: normal : Allow line breaks within words according to text rules for Asian and non-Asian languages (2) Grammar: word-wrap : normal | break-word parameter: normal: Allow content to push beyond the specified container boundaries illustrate: Sets or retrieves whether to break the line when the current line exceeds the boundary of the specified container. table-layout : auto | fixed parameter: auto: The default automatic algorithm. The layout will be based on the contents of each cell. The table will not be displayed until each cell is read and calculated. Very slow illustrate: Code: Later, I found that by rewriting the above code, I could prevent both tables/layers from breaking and words from breaking. Code: This is also the code I use now.
2. Force no line breaks
//white-space: no line wrapping; normal default; nowrap forces all text to be displayed on the same line until the text ends or a br object is encountered
white-space:nowrap; }
Automatic line wrapping
word-wrap: break-word;
word-break: normal;
}
Force line breaks for English words
word-break:break-all;
}
td(word-break: break-all; word-wrap:break-word;)
(1) Grammar:
break-all : The behavior is the same as normal for Asian languages. Breaks within any word of a line of non-Asian language text are also allowed. This value is suitable for Asian text that contains some non-Asian text
keep-all : Same as normal for all non-Asian languages. For Chinese, Korean, and Japanese, word breaks are not allowed. Good for non-Asian text that contains a small amount of Asian text
break-word : Content will break within boundaries. If necessary, word-breaks can also occur
The corresponding script feature is word-wrap. Please see other books I have written.
(3) Grammar:
fixed: Fixed layout algorithm. In this algorithm, the horizontal layout is only based on the width of the table, the width of the table border, the cell spacing, and the width of the columns, and has nothing to do with the table content.
How to make the table wrap automatically?
Sets or retrieves the table's layout algorithm.
The corresponding script attribute is tableLayout.
4. According to most articles on the Internet, just add:
code
...........
table {<br />
table-layout:fixed;word-break:break-all;word-wrap:break-word;}<br />
div{word-break:break-all;word-wrap:break-word;}
This can solve the problem of broken tables and layers. This is what I did at first. However, such code will cause a problem. You will find that all English words are truncated, which is not in line with English writing habits and is not conducive to reading.
as follows:
code
table {
table-layout: fixed;
word-wrap:break-word;
}
div {
word-wrap:break-word;
}