HTML锚标签中超链接文本的内联包装

Question

我正在寻找一种方法，可以在紧凑的矩形框中包含一个非常长的HTML链接并使文本环绕它换行。

实际上，我想要以下这种效果:

                      一个非常长的需要换行的链接
    这里是一些文本 可以环绕在矩形框中       这里还有一些文本。
                      为了更好的显示效果

而不是以下这种效果:

   这里是一些文本一个非常长的需要换行的链接 为了更好的显示效果 环绕在矩形框中这里还有一些文本。

我该如何实现呢？

- Jen

---

为什么我的帖子中没有下划线显示？在编辑时预览中会显示下划线... - Tony the Pony

替换下划线为粗体 - Kent Fredric

现在如果我能处理没有空格的内容就好了 :*( - P.Brian.Mackey

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>

- RoBorg

---

IE修复： *显示：inline; *缩放：1;做得好！ :) - Nikola R.

Answer 2

我知道这篇文章已经很老了，但它仍然是我在这个主题上搜索到的第一个结果。我发现使用以下方法：

white-space: pre-wrap;

强制锚点围绕我的宽度限制包裹文本

- Norrec

Answer 3

我遇到了这个问题是因为我使用了Bootstrap，而它默认将此设置为其样式之一。

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

这使得“word-break”和“width”CSS属性无法真正解决问题。因此，我首先必须将white-space属性设置为“pre-wrap”。

- Suzie K

Answer 4

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

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

- Darko Z

Answer 5

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

- muhammad umer

---

您可以添加更多的支持信息来改进您的答案。请[编辑]以添加进一步的细节，例如引用或文档，以便他人可以确认您的答案正确。您可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

Answer 6

有很多种方法：

display : inline-block;
display : inline;
white-space: pre-wrap;
white-spa s: nowrap;

- Crystal