<code> text not obeying encapsulating div&#39;s max-width in Firefox</code>

Question

我想将长代码包含在td和div中。它在Chrome中实现了这一点，但我无法在Firefox中使用它。在Firefox中，文本只是继续进入下一个td元素。有人可以帮帮我吗？其他关于我的代码的评论也是受欢迎的（例如“不要使用这么多div”或其他东西）

<tr class="line">
        <td class="lineNumber">38</td>
        <td class="code"><div class="divCode"><code>    error = guess - n/guessjfdklsjf dklsjf kdlsjfkldsjfkl dsjfklds jfkldsjfkljdsa;lfkjdsakl;fjdskla;fjdksl;ajfkld;sajfkl;dsajfkl;dsa
                    <td class="otherClass">other stuff here</td>

</code></div></td>
</tr>

这是由以下CSS设计的：

.line td{  
padding-right: 10px;  
    padding-left: 10px;  
    font-family: monospace;  
    word-wrap: break-word;  
    max-width: 40ex;
}  

.code {
    white-space: pre;
    max-width: 40ex;
}

.divCode {
    max-width: 40ex;
}

code {
    max-width: 40ex;
    word-wrap:break-word;
}

谢谢， --H

Answer 1

声明white-space: pre阻止包装，因此删除它可以解决此问题。但是，如果您希望在内容中保留空格，请改用white-space: pre-wrap（警告：在IE 7中不支持）。

请注意，换行不会保留缩进：如果一行以空格开头并被换行，则下一行从第一个位置开始，没有缩进。要获得保留缩进的包装（并且可能缩进连续行多于初始行），您需要不同的标记：将每个逻辑行作为元素等。