JSFiddle - React, Tailwind, and code Playground

HTML

<div></div><div></div>

CSS

div { border: 1px solid black; padding: 3px; width: 45px; float: left; margin: 2px; }

JavaScript

function wbr(str, num, shy) {  
  return str.replace(RegExp("\\w{" + num + "}\\w+", "g"), function(all){
    var c = Math.floor(all.length/2);
    return wbr(all.substring(0,c) + (!!shy?'&shy;':'<wbr>') + all.substring(c),num,shy);
  });
}

var d = document.querySelectorAll('div');
d[0].innerHTML = wbr("Hello everyone how are you doing? I'm writing an extravagently long string.", 6);
d[1].innerHTML = wbr("Hello everyone how are you doing? I'm writing an extravagently long string.", 6, true);