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

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.