我正在尝试找到一种方法来允许 HTML 链接中的非常长的文本进行换行,同时将链接包含在一个紧凑的矩形中。
本质上,我想要这个:
真的,真的 这是一些文本长链接, 这里是一些更多的文本。 在一个矩形周围
代替:
这里有一些文本,链接非常长,环绕 在一个矩形中,这里还有一些文本。
我怎样才能做到这一点?
我正在尝试找到一种方法来允许 HTML 链接中的非常长的文本进行换行,同时将链接包含在一个紧凑的矩形中。
本质上,我想要这个:
真的,真的 这是一些文本长链接, 这里是一些更多的文本。 在一个矩形周围
代替:
这里有一些文本,链接非常长,环绕 在一个矩形中,这里还有一些文本。
我怎样才能做到这一点?
你可以在 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>
我知道这已经很老了,但它仍然是我在这个主题上出现的第一批搜索结果之一。我发现使用:
white-space: pre-wrap;
强制锚将文本围绕我的宽度限制
您可以display:inline-block;
在链接上使用 css 属性,这将为您提供您想要的效果(不要忘记设置宽度:)。
IE 不支持 display:inline-block,但幸运的是,有人已经完成了艰苦的工作并在这里提出了解决方法。
我最终遇到了这个问题,因为我使用的是引导程序,默认情况下将其设置为其中一种样式
.dropdown-menu > li > a{
white-space: nowrap;
}
这使得“word-break”和“width”css属性无法实际解决问题
所以我首先必须将该空白属性设置为“预包装”