Home > Web Front-end > HTML Tutorial > How to prevent long text in Div from overflowing (currently IE can, but not FF)?_html/css_WEB-ITnose

How to prevent long text in Div from overflowing (currently IE can, but not FF)?_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:20:27
Original
1370 people have browsed it

I need to display a long text on the page, so I set the following css on the Div:
#concept{
padding-top:10px;

color:#7a7a7a;
font-size:14px;
font-weight:normal;

text-align:left;

word-wrap: break-word;
word-break: normal;

-moz-binding: url('./wordwrap.xml#wordwrap');/*FF only*/
word-break:break-all;
white-space: moz- pre-wrap;
}

However, the above css only works normally in IE, and remains the same in FF.

I looked for solutions online, and it seems that everyone in FF has this problem I am also scratching my head.
After thinking about it, I may have the following solutions:
1. Let the table and div be nested, set both, and force automatic line wrapping.
2. Use JS to modify the text. Automatically break lines.

Could you please tell me if the above two methods are feasible? If not, what should I do?


Reply to the discussion (solution)

For line wrapping, if you set a fixed width, it will automatically wrap.

Add a width to the div, and then add overflow:hidden;

Now it looks like this:
#concept{
width:900px;
padding-top:10px;

color:#7a7a7a;
font-size:14px;
font-weight:normal;

text -align:left;

word-wrap: break-word;
word-break: normal;

-moz-binding: url('./wordwrap.xml#wordwrap' );/*FF only*/
word-break:break-all;
white-space: moz-pre-wrap;
}

But it still doesn’t work:

There is no problem in IE, as shown below:

Add a width to the div, and then add overflow:hidden;

overflow:hidden;
This, hiding the text that needs to be displayed is against the requirements.

If text overflow is affected by

, try removing it. 

Text overflow is affected by

 If it is affected, try removing it. 

It is indeed the case. It will not overflow after removing it.

source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template