読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

単語内での改行を許可する関数

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

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

サンプルは以下。通常は表示範囲内に入らなくても単語が途中で改行されることはありませんが、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>

実行結果はこちら