html - HTML 锚标记中超链接文本的内联换行

Question

我正在尝试找到一种方法来允许 HTML 链接中的非常长的文本进行换行，同时将链接包含在一个紧凑的矩形中。

本质上，我想要这个：

                      真的，真的
    这是一些文本长链接，   这里是一些更多的文本。
                      在一个矩形周围

代替：

   这里有一些文本，链接非常长，环绕
   在一个矩形中，这里还有一些文本。

我怎样才能做到这一点？

Answer 1

你可以在 Firefox 中这样做 - 但它在 IE 中不起作用:(

<p>Here is some text <a href="#">with a really, really long link that wraps</a> around in a rectangle and here is some more text.


<style type="text/css">

a {display: inline-block; max-width: 100px; vertical-align: middle;}

</style>

Answer 2

我知道这已经很老了，但它仍然是我在这个主题上出现的第一批搜索结果之一。我发现使用：

white-space: pre-wrap;

强制锚将文本围绕我的宽度限制

Answer 3

您可以display:inline-block;在链接上使用 css 属性，这将为您提供您想要的效果（不要忘记设置宽度:)。

IE 不支持 display:inline-block，但幸运的是，有人已经完成了艰苦的工作并在这里提出了解决方法。

Answer 4

我最终遇到了这个问题，因为我使用的是引导程序，默认情况下将其设置为其中一种样式

.dropdown-menu > li > a{
    white-space: nowrap;
}

这使得“word-break”和“width”css属性无法实际解决问题

所以我首先必须将该空白属性设置为“预包装”