Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > css force line break IE, firefox line break

css force line break IE, firefox line break

高洛峰
Release： 2016-11-24 11:24:02
Original
1379 people have browsed it

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.

Related labels：
css
source：php.cn
Previous article：css control small icon before text Next article：[RAC] Node 1 cannot start due to lack of cssfatal
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
Latest Articles by Author
Latest Issues
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1335
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...
From 2024-04-06 20:57:16
0
1
487
How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...
From 2024-04-06 20:45:26
0
2
386
Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...
From 2024-04-06 20:41:51
0
1
518
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template