Question

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

基本上，我想要这个：

                      with a really, really
    Here is some text long link that wraps   and here is some more text.
                      around in a rectangle

而不是：

   Here is some text with a really, really long link that wraps
   around in a rectangle and here is some more text.

我该怎么做？

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中不支持inline-block，但幸运的是，有人已经完成了艰苦的工作并提出了解决方法here。

Answer 4

我结束了这个问题，因为我正在使用bootstrap，默认情况下将其设置为其中一种样式

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

使得“word-break”和“width”css属性保持实际解决问题

所以我首先必须将white-space属性设置为“pre-wrap”而不是

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

4 个答案: