Div正在截斷單詞和包裝的邊界

也許這很簡單，但是讓我變得瘋狂。要理解問題，簡單的方法是查看圖像。Div正在截斷單詞和包裝的邊界

alt text

股利寬度被截斷或者字或圓形邊界（也萬一有字之間的空間或破折號）。如果寬度不足以包含元素，如何強制每個「a」元素進入新行？

下面的代碼

<div id="post-tags"> 
    <span class="tag-title">Tagged:</span> 
          <a href="#">tag2</a> 
          <a href="#">tag3</a> 
          <a href="#">tag4</a> 
          <a href="#">longtag5</a> 
          <a href="#"li>longtag6</a> 
          <a href="#">longtag7</a> 
          <a href="#">longtag8</a> 
          <a href="#">longtag9</a> 
          <a href="#">longtag10</a> 
          <a href="#">longtag11</a> 
          <a href="#">longtag12</a> 
       </div>

而CSS

#post-tags{ 
    width: 560px; 
    float: left; 
    padding: 15px; 
    font-size: 11px; 
    } 

    #post-tags .tag-title{ 
    color: #6b6b6b; 
    padding: 5px 0 0 5px; 
    } 

#post-tags a{ 
    line-height: 24px; 
    padding: 3px; 
    background: #a7d1e3; 
    padding: 4px 10px 4px 10px; 
    margin: 0 0 10px 0; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    } 

#post-tags a:hover{ 
    color: #a7d1e3; 
    background: #205F82; 

    }

來源

2011-01-19 Andycap

我不能重現圖像上顯示的錯誤... （http://jsfiddle.net/ybyjm/）我改變了大小，它從不削減標籤 – pleasedontbelong 2011-01-19 11:31:26

你是否在怪癖模式（即不使用有效的`doctype`？）我記得用這個確切的症狀來回答一個問題，這就是原因。 – 2011-01-19 12:39:07

我發現，它並沒有在Chrome corerctly工作。解決方案可以是浮動元素。所以您爲選擇器#post-tags .tag-title和#post-tags a添加float:left;。當然，現在您會看到需要修改和填充以及邊距。接近你的一個解決方案是爲#post-tags a應用margin: 0 2px 10px;和padding: 0 10px;因此新的CSS將似乎是以下幾點：

#post-tags { 
    width: 560px; 
    padding: 15px; 
    font-size: 11px; 
    overflow:hidden; 
} 
#post-tags .tag-title { 
    color: #6b6b6b; 
    padding: 5px 0 0 5px; 
    float:left; 
} 
#post-tags a { 
    line-height: 24px; 
    padding: 3px; 
    background: #a7d1e3; 
    margin: 0 2px 10px; 
    padding: 0 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    float:left 
} 
#post-tags a:hover { 
    color: #a7d1e3; 
    background: #205F82; 
}

這裏活生生的例子：http://jsbin.com/adika4

來源

2011-01-19 11:56:43 Sotiris

Div正在截斷單詞和包裝的邊界

回答

相關問題