Div - это усекающие слова и граница на обертке

Question

Возможно, это просто, но делает меня орехами. Чтобы понять проблему, простой способ - посмотреть на изображение.

Див ширина усечения либо слово или закругленную границу (также в случае, если существует пространство или тире между словами). Как я могу заставить каждый элемент «а» перейти в новую строку, если ширины недостаточно, чтобы содержать элемент?

Вот код

<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

я обнаружил, что он не работает corerctly в хроме. Решение может состоять в том, чтобы плавать элементы. поэтому вы добавляете float:left; для селекторов #post-tags .tag-title и #post-tags a. Конечно, теперь вы увидите, что необходимо изменить и заполнить и получить поля. Раствор близко к вашему прикладывает margin: 0 2px 10px; и padding: 0 10px; для #post-tags a так что ваш новый 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