如何防止标签自动换行？

Question

我有很多标签不想自动换行，但我确实想要让标签列表自动换行。例如：

[first] [second thing] [yet another thing]

我不想要的是：

[first] [second 
thing] [yet another thing]

即在标签内打破。

我想要的是这样的：

[first] [second thing] [yet another thing]

我搞砸了

word-break: break-word; /* white-space: nowrap; */

在父子上，没有任何成功。要么整个字段结束为一行 - 根本没有中断，要么我在标签内中断。

目前我有这个：

.tag-box { word-break: break-word; } .tag { color: white; background: #000; border: 1px solid white; border-radius: 5px; margin-bottom: 10px; margin-right: 5px; padding: 5px; line-height: 200%; /* word-break: break-word; */ /* white-space: nowrap; */ }

Answer 1

这是一个fiddle：http://jsfiddle.net/5fev6o2p/6/

CSS代码：

.tag-box {
  word-break: break-word;
}

.tag {
  color: white;
  background: #000;
  border: 1px solid white;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-right: 5px;  
  padding: 5px;
  line-height: 200%;
  display:inline-block;
}

HTML:

<ul class="tag-box">
  <li class="tag">[first]</li>
  <li class="tag">[second thing]</li>
  <li class="tag">[third thing]</li>
  <li class="tag">[yet another thing]</li>
  <li class="tag">[first]</li>
  <li class="tag">[second thing]</li>
  <li class="tag">[third thing]</li>
  <li class="tag">[yet another thing]</li>
</ul>

如何防止标签自动换行？

how to prevent tags from word wrapping?

css

tags

nowrap

word-break