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

Question

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

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

这是Fiddle Demo。

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

Answer 1

该链接应具有以下样式以正确包装：

a {
    word-wrap:wrap-word;
    word-break:break-all;
    display:inline-block; /* block would also work */
}

Answer 2

实际上这很有趣。

首先，我问自己：“这可能是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... */
}