CSS溢出框

Question

我有一系列內嵌顯示的標記框。他們可能會超過容器的寬度。在這種情況下，我想他們創造另一種「想象的」行如下：

[friend][foe][enermy][love] 
[hate][indifferent] 

我怎樣才能達到這種效果呢？

我的設置現在以某種方式創建了非常奇怪的行爲：包含[仇恨]的框的一小部分（及其背景）實際上在第一行，而框的文本和背景出現在第二行。

[friend][foe][enermy][love][] 
[hate][indifferent] 

定義時，這些標籤我沒做什麼奇怪的：

.tag-label { 
border-radius: 3px 3px 3px 3px; 
color: #FFFFFF; 
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
font-size: 10.998px; 
font-weight: bold; 
line-height: 13px; 
margin: 2px; 
padding: 1px 4px 2px; 
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
vertical-align: middle; 
white-space: nowrap; 
} 

這裏是HTML。要我刪除一些元素

<div id="content"> 
    <span class="tag-label"> 
     <a href="/searches/search_tags?search_type=Listing&amp;tag=search">search (1)</a> 
    </span> 
    <span class="tag-label"> 
     <a href="/searches/search_tags?search_type=Listing&amp;tag=text">text (1)</a> 
    </span> 
    <span class="tag-label"> 
     <a href="/searches/search_tags?search_type=Listing&amp;tag=cool">cool (1)</a> 
    </span> 
</div> 

Answer 1

根據您所發佈的代碼我會假設它與span元素是display: inline做它的長默認情況下，內聯元素在包裝時會這樣操作。將.tag-label樣式更改爲display: inline-block。

此外，您.event-item類甚至沒有在你的HTML中使用，此外用display: inline-block造型是完全不必要的，如果你也打算給它width: 100%。假設元素是一個塊（如div），您可以將它保留在display: block，它會自動填充其父項的寬度。

無論如何，display: inline-block你的span s應該這樣做。

Answer 2

使用float:left

.event-item .tag-label{ 
    float:left; 
    background-color: #8F8A8A; 
} 

演示在http://jsfiddle.net/gaby/bF247/