<div id="tags_content">
  <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>
</div>
  

<button id="button_minify">Remove all whitespaces</button>
<button id="button_newlines">Remove only newlines</button>

<p>The list is minified removing the whitespaces inside and outside the tags. Adding spaces won't solve the issue when using the <code>html-minifier</code> library. Based on the documentation there's no option to prevent this.</p>

<p>Minified result:</p>
<div id="tags_minified"></div>
<textarea id="tags_minified_content" cols="50" rows="5"></textarea>

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

li {
  display: inline;
}

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


#tags_content {
  display: none; 
}

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

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

var minify = require('html-minifier').minify;
var buttonMinify = document.getElementById('button_minify');
var buttonRemoveNL = document.getElementById('button_newlines');

function getTagsContent() {
  return document.getElementById('tags_content').innerHTML;
}

function updateResult(content) {
    document.getElementById('tags_minified').innerHTML = content;
  document.getElementById('tags_minified_content').value = content;
}

buttonMinify.addEventListener('click', function (evt) {
  var content = getTagsContent();
  var options = {
    collapseWhitespace: true
  };

  updateResult(minify(content, options))
}, false);

buttonRemoveNL.addEventListener('click', function (evt) {
  var content = getTagsContent();
  
  updateResult(content.replace(/[\n\r\f]+/g, ''));
}, false);

buttonRemoveNL.click();