html 样式在 MVC 视图中的 FF 中不起作用

Question

我有以下看法：

<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>

我想打印的宽度限制在 600px 以内，所以我将顶部的 div 设置为 width=600，这在 IE 中可以正常工作，但在 Firefox 中不起作用。

例如，如果 MyDESCRIPTION 的数据类似于：

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

在 IE 中，该行可以在 600 限制内变形为多行。但是在火狐中，线会被拉长，没有翘曲，所以会被显示器剪掉。但是印刷对FF来说很好。

我很困惑。我该如何解决这个问题？

Answer 1

您需要以下 CSS 来强制换行：

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+ */
}