自动换行在IE中不起作用

Car*_*pet 12 css css3

自动换行如下:

    /* The Breakage of Too Long Words */

div.break_word {
    width: 690px;
    word-wrap: break-word;
}
Run Code Online (Sandbox Code Playgroud)

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

我在表的这一部分使用它:

        <!--  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>
Run Code Online (Sandbox Code Playgroud)

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

Sea*_*ins 13

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

-ms-word-wrap
Run Code Online (Sandbox Code Playgroud)

所以试试吧

div.break_word {
    width: 690px;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
}
Run Code Online (Sandbox Code Playgroud)

希望这可以帮助.

更新

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

再次需要IE hack.尝试为IE7添加此项.

white-space: normal; 
Run Code Online (Sandbox Code Playgroud)