如何在<a> element in IE</a>中换行文字

时间:2014-02-02 19:57:11

标签: html css internet-explorer

由于<a>元素通常包含带有各种标记的长URL,因此这通常会突破链接所在的外部容器。

为了防止这种情况,有CSS属性word-wrapword-break-ms-word-break(对于早期版本的IE)。但是,我无法让那些在IE中工作的人(尝试使用IE11)。

这是Fiddle Demo

如何在IE11中将<a>元素的内容自动换入其外部容器内?

2 个答案:

答案 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-blockblock时,效果会很好。

我不知道为什么会这样。 (据我所知)规范没有说明这一点。

但如果在容器上设置了这两个CSS声明,它们将在不同的Web浏览器上工作(IE也是如此):

div {  /* <-- the container */
  word-wrap:break-word;
  word-break:break-all;
  /* other styles... */
}