当环绕时，防止锚被切成两半

Question

这是我的网站在正常情况下的样子：

在某些页面中，我需要在更窄的空间中放入相同的元素。这看起来有多糟糕：

我向锚点添加white-space:nowrap以尝试解决此问题，但它仍然不完美：

如何在包裹时防止锚被切成两半？

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

看起来display:inline-block;有效。 http://jsfiddle.net/yUxN2/

编辑： 由于旧浏览器似乎存在一些奇怪之处，因此它是使其在任何地方都可以工作的指南：http://www.aaronrussell.co.uk/blog/cross-browser-support-for-inline-block/

Answer 2

您可以从图像和标签文本之间删除任何空白区域（包括换行符）。它可能不包裹;使用margin-right添加标签的距离。

JSFiddle demonstration based on @Adrian's (thanks!)