html style not work in FF in MVC view

Question

I have the following view:

<div style="width:600">
    <fieldset style="width:600">
    <table style="width:600" >
       <tr>
             <td>TEST</td>
             <td ><span class="displayData"><%= Html.Encode(Model.MyDESCRIPTION)%></span></td>  
             <td style="width:100%;" >&nbsp;</td>                  
             <td style="white-space: nowrap;">....</td>
             </tr>
        </table>
    </fieldset>
</div>

I want to the width limited within 600px for printing, So I set the top div to width=600, wich works fine in IE, but doesn't work in Firefox.

For example, if the data for MyDESCRIPTION is something like:

12222222222222332222222132213123..123131111111111111111111111111111 
(no space, its total length will exceed 600).

In IE the line can be warpped to multiple lines within 600 limitation. But in Firefox, the line will be extended and there is no warp, so it will be cut by the display. But printing is fine for FF.

I'm very confused. How can I resolve this problem?

Answer 1

You need the following CSS to force the line to break:

td span {
    width: 600px;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}