1. You set the width of the table, that is to give the table a width value (is the value, not a percentage)
2. Force No Line wrapping
div{
White-space: do not wrap; normal defaults; nowrap forces all text to appear in the same line until the text ends or encounters a BR object
White-space:nowrap; }
Wrap Line
div{
Word-wrap:break-word;
The
//word-break settings are forced to wrap; normal Asian and non-Asian text rules allow wrapping within words
Word-break:normal;
}
Enforce break in English words
div{
Word-break:break-all;
}
3. Summed up, as long as the definition of CSS in the following sentences, can protect the Web page will not be stretched.
Table{table-layout:fixed;
TD (Word-break:break-all; word-wrap:break-word;)
Comment:
1. The first table{table-layout:fixed;}, This style allows you to have!!! in the table Characters such as exclamation marks.
2.td{word-break:break-all}, generally this is OK, but in some special circumstances will still open, so need to add the following sentence (Word-wrap:break-word;) can be solved. This style lets you wrap some consecutive English words in a table.
http://www.knowsky.com/
(1) Syntax:
Word-break:normal | break-all | keep-all
Parameter:
Normal: According to Asia Text rules for languages and non-Asian languages that allow wrapping within words
Break-all: This behavior is the same as the normal for Asian languages. Also allows any word in a non-Asian text line to be disconnected. This value is appropriate for Asian text
Keep-all that contains some non-Asian text: the same as for all non-Asian languages. For Chinese, Korean, Japanese, word is not allowed to break. For non-Asian text that contains small amounts of Asian text
(2) Syntax:
Word-wrap:normal | Break-word
Parameter:
Normal: Allow content to top open specified container bounds
break- Word: The content wraps within the boundary. If necessary, the word wrap (Word-break) also occurs
.Description:
Sets or retrieves whether a career change is broken when the current row exceeds the bounds of the specified container. The
Corresponding script attribute is word-wrap. Please refer to other bibliographies I have written.
(3) syntax:
Table-layout:auto | fixed
Parameters:
Auto: The default automatic algorithm. The layout will be based on the contents of each cell. The table is not displayed until each cell is read and calculated. The speed is slow
fixed: the algorithm for fixing the layout. In this algorithm, the horizontal layout is based solely on the width of the table, the width of the table's borders, the spacing of the cells, the width of the columns, and the table contents regardless of the
Description:
How to make a table wrap automatically?
Sets or retrieves the layout algorithm for the table. The
Corresponding script attribute is tablelayout.
4. According to most articles on the Web, just add in CSS:
Code
...
Code:
Table {<br/>
Table-layout:fixed;word-break:break-all;word-wrap:break-word;} <BR/>
Div{word-break:break-all;word-wrap:break-word;} The
can solve the table and the layer is bursting, and I did it at first. However, this code will create a problem, you will find that the English words are all truncated, which does not conform to the English writing habits and is not conducive to reading.
Later I found that the code could be rewritten to prevent the form/layer from bursting and the word from breaking.
as follows:
Code
Codes:
Table {
table-layout:fixed;
Word-wrap:break-word;
}
Div {
Word-wrap:break-word;
}
This is the code I'm using now.