问题自动换行在IE中不起作用

自动换行如下：

    /* 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？或者由于这个原因它没有退缩，因为这个词确实被包裹了。

12675

2017-12-02 14:18

起源

你试过试试吗？ word-wrap: 在...上 <p> 在 - 的里面 <div>？ - Bojangles

这应该没有区别，因为p和div都是块元素，因此处理相同。 - Sean H Jenkins

据我所见，它只是ie7 +表给出了麻烦。如果用固定宽度的div替换表格，则div不会拉伸 - ptriek

答案:

由于自动换行是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;

2017-12-02 14:24

它在ie7-9中运行良好 - 只是ie7有点太愚蠢，无法理解父元素的宽度不应该扩展。 - ptriek

你有链接吗？ - Sean H Jenkins

jsfiddle.net/e8WKg - ptriek

我添加了更新，看看是否有效。 - Sean H Jenkins

这应该与动态宽度一起工作吗？ - AlexandruC

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

2017-12-02 15:20

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

div {
  max-width: 200px;
  word-wrap: break-word;
}

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

2017-10-16 15:11

问题 自动换行在IE中不起作用

答案:

热门问题

问题自动换行在IE中不起作用