Inline wrapping of hyperlink text in HTML anchor tag

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:

                      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?

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

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.