how to prevent tags from word wrapping?

I have a well of tags that I don't want to word-wrap, but I do want to have the list of tags wrap. For example:

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

what I DONT want is:

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

ie breaking within the tag.

what I DO want is like this:

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

I've messed with

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

on the parent and child, without any success. either the whole field just ends up as one line - with no breaking at all, or I get breaks within the tags.

currently I have this:

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

Here is a fiddle: http://jsfiddle.net/5fev6o2p/6/

CSS code:

.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>