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/