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

Automatic line wrapping problem. Line wrapping of normal characters is more reasonable, but continuous numbers and English characters often stretch the container, which is quite a headache. The following is how to implement line wrapping in CSS.

For block-level elements such as div and p

The line wrapping of normal text (Asian text and non-Asian text) elements has the default white-space:normal, and it will automatically wrap after the defined width

html

Normal text wrapping (Asian text and non-Asian text) elements have the default white-space:normal, when defined

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;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

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;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

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

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

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

abcdefghigklmnopqrstuvwxyz1234567890

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.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn