<p>Toggling a class to change the display property from <code>inline</code> to <code>inline-block</code> to force the browser to break the line after each <code>&lt;li&gt;</code> when the line reaches its parent boundaries.</p>
<button id="button_toggle">Toggle inline/inline-block</button>

<div class="tags"><ul><li>PHP</li><li>JavaScript</li><li>Rust</li><li>Objective-C</li><li>Ruby</li><li>Python</li><li>Go</li><li>C</li><li>Swift</li><li>Java</li><li>Perl</li><li>Pascal</li><li>Bash</li><li>Kotlin</li><li>Erlang</li><li>Scala</li><li>Elixir</li><li>Haskell</li></ul></div>

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline;
  
  .inline-block & {
    display: inline-block;
  }
}

.tags {
  width: 200px;
  /* This is so we can visually see the box boundaries */
  border: 2px solid darkorchid;
}

button {
  margin: 2rem 0;
}

#tags_minified {
  border: 1px dotted black;
  width: 200px;
  min-height: 2rem;
  margin-bottom: 1rem;
}

body {
  font: 125%/1.4 system-ui;
  margin: 2rem;
}

var buttonToggle = document.getElementById('button_toggle');

buttonToggle.addEventListener('click', function (evt) {
  var el = document.querySelector('.tags');
  
  el.classList.toggle('inline-block');
}, false);