由于<a>
元素通常包含带有各种标记的长URL,因此这通常会突破链接所在的外部容器。
为了防止这种情况,有CSS属性word-wrap
,word-break
和-ms-word-break
(对于早期版本的IE)。但是,我无法让那些在IE中工作的人(尝试使用IE11)。
这是Fiddle Demo。
如何在IE11中将<a>
元素的内容自动换入其外部容器内?
答案 0 :(得分:2)
该链接应具有以下样式以正确包装:
a {
word-wrap:wrap-word;
word-break:break-all;
display:inline-block; /* block would also work */
}
答案 1 :(得分:1)
实际上这很有趣。
首先,我问自己:“这可能是hasLayout
问题吗?” (旧的相关issue)
因此我制作了 test on JSBin ,并在 IE8 (Windows7)上检查了结果。
但我遇到了一种奇怪的行为。
在该演示中,word-wrap: break-word;
无法在inline
元素(例如<a>
标记)上正常运行。但是如果你在父(<div>
元素)上设置它就可以了!
MSDN states此属性将应用于所有元素。
将该内联元素的display
属性更改为block
后,它可以正常运行。
另一方面,在word-break: break-all;
元素上使用inline
的情况相同;它不会起作用。
但是,当我们将元素的display
属性更改为inline-block
或block
时,效果会很好。
我不知道为什么会这样。 (据我所知)规范没有说明这一点。
但如果在容器上设置了这两个CSS声明,它们将在不同的Web浏览器上工作(IE也是如此):
div { /* <-- the container */
word-wrap:break-word;
word-break:break-all;
/* other styles... */
}