html - 文本不遵守在 Firefox 中封装 div 的最大宽度

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 不支持)。

请注意，换行不会保留缩进:如果一行以空格开头并换行，则下一行从第一个位置开始，没有缩进。要获得保留缩进的换行(并且可能比初始行更多地缩进连续行)，您需要不同的标记:使每个逻辑行成为一个元素等。