在 IE 上调整窗口大小时自动换行不起作用答案

【问题标题】：word wrap does not work on when window is resized on IE在 IE 上调整窗口大小时自动换行不起作用
【发布时间】：2015-10-27 11:02:05
【问题描述】：

我有一个包含 3 个 div 的简单 html 布局。 div 由边界线分隔。中间的 div 有很长的文字。我通过应用样式 word-wrap:break-word 来打破长文本。问题在于 window resize（当窗口尺寸较小时），文本与边框线重叠。这仅在 IE（版本 11）上发生，但适用于 chrome 和 FF。

请告知如何解决 IE 上的窗口调整大小文本对齐问题。这是html：

<html>
    <body>
        <div style="border-right-style: solid;border-width:1px;">
        text goes here
        </div>
         <div style="border-right-style: solid;border-width:1px;">
            <span style="word-wrap:break-word;"> XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy</span>
         </div>
        <div>
        XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy
        </div>
    </body>
</html>

【问题讨论】：

标签： css internet-explorer resize window word-wrap

【解决方案1】：

问题在于span 是一个内联元素。尝试使用div 或设为display: block。

<html>
    <body>
        <div style="border-right-style: solid;border-width:1px;">
        text goes here
        </div>
         <div style="border-right-style: solid;border-width:1px;">
            <span style="word-wrap:break-word; display: block;"> XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy</span>
         </div>
        <div>
        XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy
        </div>
    </body>
</html>

【讨论】：

谢谢。有效。我还尝试使用省略号 css

【解决方案2】：

break-word 是一个非标准添加，由 WebKit 浏览器实现，但不是由 IE 实现。见word-break | CSS-tricks

您可以使用任何其他分词值，例如：

word-break: break-all;

如果您认为break-word 看起来更好，您可以按正确的顺序添加它们：

word-break: break-all;
word-break: break-word;

这应该让 WebKit 浏览器使用break-word。 IE 不支持这个，应该忽略这个规则，回退到break-all。

【讨论】：

我试过 word-break: break-all 但在调整窗口大小时不起作用
我尝试按照您的建议同时使用 break-word 和 break-all。在全窗口情况下一切正常。在我调整窗口大小并增加和减小大小的那一刻，IE 对长文本反应不佳。我的长文本越过了 div 的边界线。