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

Question

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.

Essentially, I want this:

                      
    Here is some text    and here is some more text.
                      

Instead of:

   Here is some text 
    and here is some more text.

How can I do this?

Answer 1

You can do it like this in Firefox - it doesn't work in IE though :(

<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

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

Answer 3

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

So I first had to set that white-space property to "pre-wrap" instead

Answer 4

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 is not supported in IE, but lucky for you someone has already done the hard work and come up with a workaround here .

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>

Answer 6

There are many ways:

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