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

我有一个简单的html布局，有3个div。潜水区由边界线隔开。中间的div有很长的文本。我通过使用word-wrap:break-word样式来分割长文本。问题是在窗口调整大小(当窗口尺寸较小时)，文本与边框线重叠。这只发生在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>

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

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

您可以使用任何其他换行值，例如:

word-break: break-all;

如果你认为break-word看起来更好，你可以把它们都加起来，以正确的顺序:

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

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

相关内容

最新更新

热门标签：