Q: How to avoid breaking 
*'s in an inline 
*? I have an inline ul, like so:
<ul>
  <li><span>...</span></li>
  <li><span>...</span></li>
  ...
</ul>

with ul { list-style-type: none; } and li { display: inline }. Each item is a tag, and the final product looks extremely similar to StackOverflow's list of tags on each question (a <li> contains some text and an icon).
My problem is that when I have enough items to reach the end of the line, the last <li> breaks, leaving half on the current line and the other half on the next line.
How to avoid this?
To elaborate (I am using Bootstrap]):
<div class="col-lg-4">
  <ul>
    <li><span class="user_tag">User 1 <span class="glyphicon glyphicon-remove"></span></span></li>
    <li><span class="user_tag">User 2 <span class="glyphicon glyphicon-remove"></span></span></li>
    ...
  </ul>
</div>

(note that Bootstrap fills the span.glyphicon with the appropriate icon). As to the styling (using SASS syntax):
ul {
  list-style-type: none;
}

li {
  display: inline;

  .user_tag {
    border: 1px solid #888888;
    border-radius: 5px;
  }
}

The problem is that upon reaching the right edge of the <div>, the last user is broken, leaving his name on the current line, and the glyphicon on the next line.

A: Try adding white-space: nowrap to your li style. That should prevent it from breaking mid-word and will wrap the entire thing to the next line.

A: In fact what you need is to change your <ul> element to
ul{display:block}

and <li> to
li{display:inline-block}

the nowrap approach will make that if you add a really long name, you'll end with a massive width <li> element. Unless you're looking for that, your approach is incorrect, might work in this specific case, but it's a NO-NO in general . I mean, it might apply to your case and ONLY TO YOUR CASE, but for people seeing this thread, it's better not to follow that path since it's incorrect
