Display problem of long text in css table cells_html/css_WEB-ITnose

css

#wrap{white-space:normal; width:200px; }

1. (IE browser) For continuous English characters and Arabic numerals, use word-wrap : break-word; or word-break:break-all; to implement forced line breaking #wrap{word-break:break-all; width:200px;}

or

# wrap{word-wrap:break-word; width:200px;}

Effect: line wrapping can be achieved

2. (Firefox browser) Line breaks of continuous English characters and Arabic numerals. All versions of Firefox do not solve this problem. We can only hide the characters beyond the boundary or add scroll bars to the container

#wrap{word-break:break-all; width:200px; overflow:auto;}

Effect: The container is normal, the content is hidden

For table

1. (IE browser) use table-layout:fixed; to force the width of the table, and the excess content is hidden

Effect: hide redundant content

2. (IE browser) use table-layout:fixed; to force the width of the table, inner td ,th uses word-break: break-all; or word-wrap: break-word; line break

Effect: line breaks possible

3. (IE browser) in td,th Nested divs, p, etc. use the line wrapping method of div and p mentioned above

4. (Firefox browser) Use table-layout: fixed; to force the width of the table, and the inner td, th use word -break: break-all; or word-wrap: break-word; line break, use overflow:hidden; to hide the excess content, overflow:auto; does not work here

Effect: Hide more than content

5. (Firefox browser Device) Nest div, p, etc. in td, th. Use the method mentioned above to deal with Firefox

Run the code box

Finally, the chance of this phenomenon occurring is very small, but it cannot Exclude netizens’ pranks.