区切りは、折り返し時に単語と枠線を切り捨てています

Question

多分これは簡単ですが、私をナッツにしています。 問題を理解するには、簡単な方法は画像を見ることです。

本部幅がいずれかの単語または丸い境界を切り捨てるされる（また、ケース内の単語の間にスペースまたはダッシュがあります）。 widthが要素を格納するのに十分でない場合、どのように各 "a"要素を強制的に新しい行に入れることができますか？

ここで私はそれがクロムでcorerctly動作しないことが判明コード

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

    } 

Answer 1

です。解決策は、要素を浮動させることです。セレクタ#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