HTML 锚标记中超链接文本的内联包装
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/646657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inline wrapping of hyperlink text in HTML anchor tag
提问by Tony the Pony
I'm trying to find a way to allow really long text in an HTML link to wrap while containing the link in a compact rectangle.
我试图找到一种方法，允许 HTML 链接中的非常长的文本在包含紧凑矩形中的链接的同时进行换行。
Essentially, I want this:
基本上，我想要这个：
with a really, really
Here is some text long link that wraps and here is some more text.
around in a rectangle
Instead of:
代替：
Here is some text with a really, really long link that wraps around in a rectangle and here is some more text.
How can I do this?
我怎样才能做到这一点？
回答by Greg
You can do it like this in Firefox - it doesn't work in IE though :(
你可以在 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>
回答by Norrec
I know this is pretty old, but it was still one of the first search results that came up for me on the subject. I found that using:
我知道这已经很老了，但它仍然是我在这个主题上出现的第一个搜索结果之一。我发现使用：
white-space: pre-wrap;
forced the anchor to wrap the text around my width restrictions
强制锚将文本包裹在我的宽度限制周围
回答by Suzie K
I wound up having this issue because I was using bootstrap and it was by default setting this as one of it's styles
我最终遇到了这个问题，因为我使用的是引导程序，并且默认情况下将其设置为其中一种样式
.dropdown-menu > li > a{
white-space: nowrap;
}
Which made kept the "word-break" and "width" css properties from actually solving the problem
这使得“断字”和“宽度”css属性无法实际解决问题
So I first had to set that white-space property to "pre-wrap" instead
所以我首先必须将该空白属性设置为“预包装”
回答by Darko Z
You can use display:inline-block;css property on your link which will give you exactly the effect you desire (dont forget to set the width :).
你可以display:inline-block;在你的链接上使用css 属性，它会给你你想要的效果（不要忘记设置宽度:)。
display:inline-block is not supported in IE, but lucky for you someone has already done the hard work and come up with a workaround here.
display:inline-block 在 IE 中不受支持，但幸运的是有人已经完成了艰苦的工作并在这里提出了解决方法。
