Home  >  Article  >  Web Front-end  >  css force line break IE, firefox line break

css force line break IE, firefox line break

高洛峰
高洛峰Original
2016-11-24 11:24:021357browse

For block-level elements such as div and p,

normal text (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 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 achieve forced line breaking

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

or

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

abcdefghijklmnabcdefghijklmnabcdefghijklmn11111111 1

Effect: Line breaks can be achieved

2. (Firefox browser) Continuous English characters and Arabic numerals are broken. 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 and 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, the inner td, th uses word-break: break-all; or word-wrap: break-word; line break

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

< ;/td>

4. (Firefox 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; to wrap the line, use overflow: hidden; Hide beyond content, overflow:auto; does not work here

abcdefghigklmnopqrstuvwxyz1234567890 abcdefghigklmnopqrstuvwxyz1234567890

Effect: Hide more than content

5. (Firefox browser) Embed in td,th Set div, p, etc. and use the method mentioned above to deal with Firefox to run the code box. Finally, the chances of this happening are very small.

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