Question

This is how my site should look like under normal circumstances:

In certain pages, I need to fit the same element in a much narrower space. Here’s how bad it looks:

I added white-space:nowrap to the anchor in an attempt to fix this, but it’s still not perfect:

How do I prevent the anchor from getting chopped in half when it wraps around?

HTML

<div id="marquee" style="display: none">
    <div id="vlcUpgradePrompt" style="display: none">
        <span>Upgrade to Veetle TV to watch this channel in <b>HD</b>.</span>
        <a 
            href="javascript:void(0)"
            onclick="VEETLE.bootstrap.vlcUpgradePrompt(); return false;"
            class="button buttonDark">
            <img class="spriteCommon iconDownloadArrow" src="/images/spacer.gif">
            Free upgrade
        </a>
    </div>
    <div id="flashDowngradeUnavailable" style="display: none">
        <img 
            src="<?=base_url()?>images/spacer.gif"
            class="spriteCommon iconError" />
        <span>Sorry, the low quality version of this channel is not available.</span>
    </div>
    <div id="flashNotInstalled" style="display: none">
        <img 
            src="<?=base_url()?>images/spacer.gif"
            class="spriteCommon iconError" />
        <span>You need Flash Player to view the low quality version.</span>
        <a 
            href="http://get.adobe.com/flashplayer/"
            class="button buttonDark">
            <img class="spriteCommon iconDownloadArrow" src="/images/spacer.gif">
            Download Flash
        </a>
    </div>
</div>

CSS

#marquee {
}

    #marquee div {
        -moz-border-radius-bottomleft: 0.4em;
        -webkit-border-bottom-left-radius: 0.4em;
        -moz-border-radius-bottomright: 0.4em;
        -webkit-border-bottom-right-radius: 0.4em;
        border: 1px solid;
        border-color: #e5e5b8 #ccc #666 #ccc;
        background: #ffffcc;
        background: -moz-linear-gradient(
            top,
            #ffffcc,
            #ebebbc
        );
        background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, #ffffcc),
            color-stop(1, #ebebbc)
        );
        padding: 1em;
        line-height: 2em;
        -moz-box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.1);
        -webkit-box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.1);
    }
        #marquee div img {
            margin-top: -0.2em;
        }

        #marquee div img.iconError {
            margin-right: 1em;
        }

        #marquee div span {
            font-size: 1.2em;
            padding: 0 1em 0 0;
        }

        #marquee div a {
            font-size: 1.2em;
        }

            #marquee div a img {
                margin-right: 0.4em;
            }

Answer 1

It looks like display:inline-block; works. http://jsfiddle.net/yUxN2/

EDIT:
Since it seems there are a few oddities in older browsers, heres a guide to making it work everywhere: http://www.aaronrussell.co.uk/blog/cross-browser-support-for-inline-block/