Css 如何防止标签换行？

我有很多不想用word包装的标签，但我确实想包装标签列表。 例如：

[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; */
}

这是一把小提琴：

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>