在 IE 上调整 window 大小时自动换行不起作用

Question

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

请告知如何解决 IE 上的 window 调整文本对齐问题。这是 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>

Answer 1

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.

Answer 2

问题是 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>

在 IE 上调整 window 大小时自动换行不起作用

word wrap does not work on when window is resized on IE

css

internet-explorer

resize

window

word-wrap