Div обрезает слова и ограничивает перенос - PullRequest
Новая
       3

Div обрезает слова и ограничивает перенос

0 голосов
/ 19 января 2011

Может быть, это просто, но сводит меня с ума. Чтобы понять проблему, проще всего посмотреть на изображение.

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;

    }

1 Ответ

0 голосов
/ 19 января 2011

Я обнаружил, что он не работает в Chrome.Решением может быть всплытие элементов.поэтому вы добавляете 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

...