https://unageanu.hatenablog.com/entry/20090930/1254318861

表示範囲内に収まりきらない単語がある場合に、単語の途中でも改行させるようにする関数です。
アルファベットの前にゼロ幅スペース("")を挿入して、改行できるようにします。

/**
 * アルファベットの前にゼロ幅スペース("&#x200B;")を挿入して、
 * 単語中での改行をサポートする。
 */
function wordBreak( str ) {
  return str.replace(/(?=\w)/g, "&#x200B;");
}

サンプルは以下。通常は表示範囲内に入らなくても単語が途中で改行されることはありませんが、wordBreak()した文字列であれば途中で改行されます。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript">

    /**
     * アルファベットの前にゼロ幅スペース("&#x200B;")を挿入して、
     * 単語中での改行をサポートする。
     */
    function wordBreak( str ) {
      return str.replace(/(?=\w)/g, "&#x200B;");
    }

    function onLoad() {
      var str = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz";
      document.getElementById( "default" ).innerHTML = str;
      document.getElementById( "wordBreak" ).innerHTML = wordBreak(str);
    }
  </script>
  <style>
    div.box { width:100px;border: 1px solid #bbb; }
  </style>
</head>
<body onload="onLoad();">
  ■単語内での改行禁止(デフォルト)
  <div id="default" class="box"></div>
  <br/>
  ■単語内での改行を許可
  <div id="wordBreak" class="box"></div>
</body>
</html>

実行結果はこちら。