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/