Prevent the anchor from being chopped in half when it wraps around

Question

Here's how my site should look under normal conditions:

On some pages, I need to pick up the same element in a much narrower space. Here's how it looks bad:

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

How to prevent an anchor from overlapping in half when it is wrapped?

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 there seem to be a few oddities in older browsers, this is a guide to getting it working everywhere: http://www.aaronrussell.co.uk/blog/cross-browser-support-for-inline-block/

Answer 2

You can remove any white space (including line breaks) between the image and the label text. Then it cannot be completed; use margin-right to add distance to the mark.

JSFiddle demo based on @Adrian (thanks!)