Css implements automatic line feed for table td

Apply a style to a cell with a long address:

The code is as follows:	Copy code
Word-wrap: break-word; word-break: break-all; <Td style = "word-wrap: break-word; word-break: break-all;" width = "200"> </td>

For div

1. (ie browser) white-space: normal; word-break: break-all; the former follows the standard.

The code is as follows:	Copy code
# Wrap {white-space: normal; width: 200px ;} Or # Wrap {word-break: break-all; width: 200px ;} <Div id = "wrap"> ddd111111111111111111111111111111111111111111 </div>

Effect: line breaks can be implemented.

2. (Firefox) white-space: normal; word-break: break-all; overflow: hidden; the same FF does not have a good implementation method. You can only hide or add a scroll bar, of course, it is better to not add a scroll bar!

The code is as follows:	Copy code
# Wrap {white-space: normal; width: 200px; overflow: auto ;} Or # Wrap {word-break: break-all; width: 200px; overflow: auto ;} <Div id = "wrap"> ddd333333333333333333333333333333333333333333333 </div>

Effect: The container is normal and the content is hidden.

For table

1. (ie browser) use the style table-layout: fixed;

The code is as follows:	Copy code
<Style> . Tb {table-layout: fixed} </Style> <Table class = "tbl" width = "80 & Prime;> <Tr> <Td> abcdefghigklmnopqrstuvwxyz 1234567890 </Td> </Tr> </Table>

Effect: line breaks are supported.

2. (ie browser) use the style table-layout: fixed and nowrap

The code is as follows:	Copy code
<Style> . Tb {table-layout: fixed} </Style> <Table class = "tb" width = "80 & Prime;> <Tr> <Td nowrap> abcdefghigklmnopqrstuvwxyz 1234567890 </Td> </Tr> </Table>

Effect: line breaks are supported.

3. (ie browser) use the style table-layout: fixed and nowrap when the percentage is fixed to the td size.

The code is as follows:	Copy code
<Style> . Tb {table-layout: fixed} </Style> <Table class = "tb" width = 80> <Tr> <Td width = 25% nowrap> abcdefghigklmnopqrstuvwxyz 1234567890 </Td> <Td nowrap> abcdefghigklmnopqrstuvwxyz 1234567890 </Td> </Tr> </Table>

Effect: The line feed is normal for both td devices.

3. (Firefox) use the style table-layout: fixed and nowrap when the percentage is fixed to the td size, and use the div

The code is as follows:	Copy code
<Style> . Tb {table-layout: fixed} . Td {overflow: hidden ;} </Style> <Table class = tb 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>

The cell width must be defined in percentage.

Effect: normal display, but not line feed (note: There is no good way to wrap the container content under FF, you can only use overflow to hide the extra content to avoid affecting the overall effect)
CSS style solves the problem of word breaking in English line breaks

The code is as follows:

Copy code

* {Word-wrap: break-word; word-break: break-all ;} /* Word-wrap controls the line feed. 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.

Now, we have finished the analysis of the automatic line feed of td, mainly for the analysis of table and div and compatibility, and finally found that this part-time job is incompatible, it is a headache.