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

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