防止錨越來越切碎，當它環繞

good

在某些頁面，我需要適應同一元素在更窄的空間。下面是它看起來多麼糟糕：

enter image description here

我在試圖解決這一問題添加white-space:nowrap到錨，但它仍然不是很完美：

nowrap whitespace

如何防止錨當它環繞時切成兩半？

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; 
      }

來源

2011-02-11 JoJo