Question

自动换行如下：

    /* The Breakage of Too Long Words */

div.break_word {
    width: 690px;
    word-wrap: break-word;
}

确实为下表包装了单词，但它也使表拉伸：

我在表的这一部分使用了它：

        <!--  The Contribution Description -->
        <tr>
            <td colspan="3"><div class="break_word"><p><?php echo $contribution_description; ?></p></div></td>
        </tr>

        <!--  The Separation Line -->
        <tr>
            <td colspan="3"></td>
        </tr>

        <!--  The Contribution -->
        <tr>
            <td colspan="3"><pre><div class="break_word"><?php echo $contribution; ?></div></pre></td>
        </tr>

</table>

是否保持拉伸状态，因为它总体上是一个表而不是div？或者由于这个原因它没有退缩，因为这个词确实被包裹了。

Answer 1

由于自动换行是CSS3属性，因此仅受IE9及更高版本的支持。对于IE8，请尝试

-ms-word-wrap

所以试试

div.break_word {
    width: 690px;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
}

希望这有帮助。

<强>更新

似乎即使你在IE7中使用-ms-word-wrap，它也默认为white-space：nowrap;然后覆盖自动换行属性。

再次需要IE hack。尝试为IE7添加此功能。

white-space: normal;

Answer 2

即使在IE6中，你的div内的p也能正常工作。 pre中的div是无效的HTML。

Answer 3

也可以通过以下方式为IE实现自动换行：

<div>loooooooooooooooooooooooooooooooooooooooooongword</div>
<div>long long long long long long long word</div>

{{1}}

自动换行在IE中不起作用

3 个答案: