Prevent LI text from wrapping within the LI in an Inline List; break wrap list instead

Question

I am using a list to display a number of tags in a line, similar to how tags are displayed on this site.

If the list of tags is wider than the container, I want a whole tag (a list item) to move to the next line. But, what happens now, if a single tag has white space, it wraps at the whitespace.

How can I force an entire LI to the next line?

Here is the code:

<ul class="tags row cf">
    <li><a href="/slug1">first tag</a></li>
    <li><a href="/slug2">another tag</a></li>
</ul>

And the CSS:

.tags {
    list-style-type: none;
    padding: 0;
    font-size: smaller;
}

.row {width: 100%}
.row::before,
.row::after {display: table; content: " "; clear: both}

.cf:after {
    clear: both;
}
.cf:before, .cf:after {
    content: " ";
    display: table;
}

Answer 1

add

.tags li {
  display: inline-block;
}