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

JavaScriptでテキストが要素からオーバーフローしたときの対処法

textOverflowプロパティでテキストのはみ出しを解決する

JavaScriptでテキストがコンテナ要素からあふれてしまう問題には、textOverflowプロパティを使って対処できます。このプロパティの値を「ellipsis」に設定すると、要素からあふれたテキストの末尾に省略記号（…）が表示され、レイアウトが崩れるのを防ぐことができます。

textOverflowを有効にするための条件

textOverflowプロパティを正しく機能させるには、対象の要素に以下のスタイルを併せて指定しておく必要があります。

  • overflow: hidden; … コンテナからはみ出した部分を非表示にします。
  • white-space: nowrap; … テキストを折り返さず、1行で表示します。

これらの条件が揃っていないと、ellipsisによる省略記号の表示は行われませんので注意してください。

実装例

次のコードでは、ボタンをクリックするとJavaScriptによってtextOverflowプロパティが「ellipsis」に変更され、div要素内のテキストがあふれた際に末尾へ「…」が表示される仕組みになっています。実際にブラウザで動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            border: 2px solid blue;
            background-color: gray;
            overflow: hidden;
            text-overflow: visible;
            width: 200px;
            white-space: nowrap;
         }
      </style>
   </head>
   <body>
      <button onclick = "display()"> Click </button>
      <div id = "myID">
         This is Demo Text! This is Demo Text! This is Demo Text!<br>
         This is Demo Text! This is Demo Text! This is Demo Text!<br>
         This is Demo Text! This is Demo Text! This is Demo Text!<br>
         This is Demo Text! This is Demo Text! This is Demo Text!<br>
      </div>
      <script>
         function display() {
            document.getElementById("myID").style.textOverflow = "ellipsis";
         }
      </script>
   </body>
</html>

コードのポイント

  • CSS側でoverflow: hidden;とwhite-space: nowrap;をあらかじめ指定し、テキストがあふれる状態を作っています。
  • ボタンをクリックするとdisplay()関数が呼び出され、style.textOverflow = "ellipsis"によって省略記号の表示が有効になります。
  • 初期状態ではtext-overflow: visible;が設定されていますが、クリック後は「…」付きの表示に切り替わります。

このように、textOverflowプロパティを活用すれば、長いテキストが要素からあふれるケースでも、ユーザーにとって分かりやすい形で表示を制御できます。ニュースの一覧やカード型UIなど、限られた幅の中にテキストを収めたい場面でぜひ活用してみてください。

  1. 【JavaScript】ボックスからはみ出すコンテンツをスクロール表示にする方法（overflowプロパティの使い方）

    Webページを作成していると、width や height で指定した要素のボックスからコンテンツがはみ出してしまうことがあります。このような場合には、CSSの overflow プロパティを使用してスクロールバーを追加しましょう。スクロールできるようになることで、訪問者もはみ出したコンテンツ全体を快適に読めるようになります。 overflowプロパティで使える主な値 visible：初期値。ボックスからはみ出したコンテンツがそのまま外側に表示されます。 hidden：はみ出した部分が切り取られ、表示されません。 scroll：コンテンツの量にかかわらず、常にスクロールバーが表示されます。

  2. JavaScriptでspan要素のテキストを取得する方法

    JavaScriptで要素のテキストを取得するには、document.querySelector()で対象の要素を取得し、そのinnerHTMLプロパティを参照します。以下に、実際に動作するサンプルコードを示します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initi