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 ;} Eg. <Div id = "wrap"> ddd11111111111111111111111111111111111111111111111111111111111111111111111111111 </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 ;} Eg. <Div id = "wrap"> ddd11111111111111111111111111111111111111111111111111111111111111111111111111111 </div> |
Effect: The container is normal and the content is hidden.
For table
1. (ie browser) use the style table-layout: fixed;
Eg.
The code is as follows: |
Copy code |
<Style> . Tb {table-layout: fixed} </Style> <Table class = "tbl" width = "80"> <Tr> <Td> abcdefghigklmnopqrstuvwxyz 1234567890 </Td> </Tr> </Table> |
Effect: line breaks are supported.
2. (ie browser) use the style table-layout: fixed and nowrap
Eg.
The code is as follows: |
Copy code |
<Style> . Tb {table-layout: fixed} </Style> <Table class = "tb" width = "80"> <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
Eg.
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> |