Home >Web Front-end >CSS Tutorial >Use CSS to control tables or cells to force line breaks to prevent the table from being enlarged by English words or Chinese_Experience exchange
Use CSS to control tables or cells to force line breaks to prevent the table from being enlarged by English words or Chinese_Experience exchange
- WBOYOriginal
- 2016-05-16 12:04:142213browse
For block-level elements such as div and p
Normal text line wrapping (Asian text and non-Asian text) elements have the default white-space:normal, and they will automatically wrap after the defined width
html
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 achieve 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 have not solved this problem. We can only let the line break exceed Hide the border characters or add scroll bars to the container
#wrap{word-break:break-all; width:200px; overflow:auto;}
Effect: The container is normal and the content is hidden
For table
1. (IE browser) use table-layout:fixed; force the width of the table, and the excess content is hidden
Effect: hidden Superfluous content
2. (IE browser) use table-layout: fixed; to force the width of the table, the inner td, th uses word-break: break-all; or word-wrap: break-word; line break
Effect: Line wrapping is possible
3. (IE browser) Nesting div, p, etc. in td, th uses the line wrapping method of div and p mentioned above
4. (Firefox browser) Use table -layout:fixed; Force the width of the table, the inner td, th uses word-break: break-all; or word-wrap: break-word; wrap the line, use overflow:hidden; hide the excess content, here overflow:auto; cannot Works
Normal text line wrapping (Asian text and non-Asian text) elements have the default white-space:normal, and they will automatically wrap after the defined width
html
Normal text wrapping (Asian 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 achieve 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 have not solved this problem. We can only let the line break exceed Hide the border characters or add scroll bars to the container
#wrap{word-break:break-all; width:200px; overflow:auto;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
Effect: The container is normal and the content is hidden
For table
1. (IE browser) use table-layout:fixed; force the width of the table, and the excess content is hidden
| abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss |
Effect: hidden Superfluous content
2. (IE browser) use table-layout: fixed; to force the width of the table, the inner td, th uses word-break: break-all; or word-wrap: break-word; line break
| abcdefghigklmnopqrstuvwxyz 1234567890 | abcdefghigklmnopqrstuvwxyz 1234567890 |
3. (IE browser) Nesting div, p, etc. in td, th uses the line wrapping method of div and p mentioned above
4. (Firefox browser) Use table -layout:fixed; Force the width of the table, the inner td, th uses word-break: break-all; or word-wrap: break-word; wrap the line, use overflow:hidden; hide the excess content, here overflow:auto; cannot Works
Statement：
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