JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで非CJKスクリプトの改行ルールを設定する方法【wordBreakプロパティの使い方】

JavaScriptで非CJKスクリプトの改行ルールを設定するには？

非CJKスクリプトの行の折り返し（改行）ルールを設定するには、JavaScriptでwordBreakプロパティを使用します。なお、CJKスクリプトとは以下の3つを指します。

  • C … 中国語（Chinese）
  • J … 日本語（Japanese）
  • K … 韓国語（Korean）

これら以外の言語（英語などラテン文字ベースのスクリプト）が「非CJKスクリプト」に該当し、wordBreakプロパティによってその改行の挙動を制御できます。

代表的な値としては、単語の途中でも強制的に改行させる「break-all」や、通常のルールに従う「normal」などがあります。

実装例

以下のコードを実行して、wordBreakプロパティの実装方法を確認してみましょう。ボタンをクリックすると、指定した要素に対して「break-all」が適用され、単語の途中でも幅に合わせて折り返されるようになります。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            width: 150px;
            height: 120px;
            background-color: lightblue;
            border: 1px solid black;
         }
      </style>
   </head>
   <body>
      <button onclick = "display()">設定</button>

      <div id = "box">
         This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.
      </div>

      <script>
         function display() {
            document.getElementById("box").style.wordBreak = "break-all";
         }
      </script>
   </body>
</html>

コードのポイント

  • ボタンをクリックすると display() 関数が呼び出されます。
  • document.getElementById("box").style.wordBreak = "break-all"; により、idが「box」の要素へ改行ルールが動的に適用されます。
  • 「break-all」を指定することで、英語などの非CJKテキストでも要素の幅に合わせて任意の位置で改行されます。

  1. JavaScriptでテキストのフォントサイズを設定する方法【fontSizeプロパティの使い方】

    JavaScriptでフォントサイズを設定するには、style.fontSizeプロパティを使用します。このプロパティに「px」「em」「%」などの値や「smaller」「larger」といったキーワードを指定することで、要素の文字サイズを動的に変更できます。 実装例 以下のコードでは、ボタンをクリックすると指定した段落（ID：myID）のフォントファミリーとフォントサイズが変更されます。 <!DOCTYPE html> <html> <body> <h1>見出し1</h1> <p id = myI

  2. JavaScriptで要素を水平方向に配置する方法【cssFloatプロパティの使い方】

    要素を水平方向に配置（フロート）させるには、JavaScriptのcssFloatプロパティを使用します。cssFloatプロパティは、CSSのfloatプロパティに対応するもので、「left」「right」「none」の値を設定することで、画像やテキストなどの要素を左右どちらかに回り込ませることができます。例えば「right」を指定すると、要素は右側に配置され、その周囲に他のコンテンツが回り込みます。サンプルコード以下のコードを実行すると、ボタンをクリックしたときに画像が右側に水平配置されます。ぜひ試してみてください。<!DOCTYPE html> <html> &n