JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/css-line-break"></script>

Text: <input type="text" value="Lorem ipsum lol." id="text" />
Word break: <select id="wordbreak">
<option value="normal">normal</option>
<option value="break-all">break-all</option>
<option value="break-word">break-word</option>
<option value="keep-all">keep-all</option>
</select>
<h2>Words:</h2>
<ul id="result"></ul>

JavaScript

const { LineBreaker } = window['css-line-break'];
const $text = document.querySelector('#text');
const $result = document.querySelector('#result');
const $wordBreak = document.querySelector('#wordbreak');


function update() {
  const breaker = LineBreaker($text.value, {
      lineBreak: 'strict',
      wordBreak: $wordBreak.value
  });
  
  const words = [];
  let bk;

  while (!(bk = breaker.next()).done) {
      words.push(bk.value.slice());
  }


  $result.innerHTML = '';
  words.forEach(function(word) {
    const $li = document.createElement("li");
    $li.textContent = word;
    $result.appendChild($li);
  });
}

$text.addEventListener('keyup', update, false);
$text.addEventListener('change', update, false);
$wordBreak.addEventListener('change', update, false);

update();