Question

我有一个简单的html布局，有3个div。 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>

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。

＆＃13;

<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>

＆＃13;

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

2 个答案: