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

CSSのtext-overflowプロパティとは？はみ出したテキストの表示方法を解説

text-overflow プロパティは、要素からあふれて表示されなかったテキストコンテンツを、ユーザーに対してどのように知らせるかを指定するためのCSSプロパティです。

このプロパティを活用することで、長い文章がボックスからはみ出す場合に、単純に切り取るだけでなく「…（省略記号）」を表示するなど、見た目に配慮した処理が可能になります。

主な値

  • clip：あふれた部分をそのまま切り取って表示します（初期値）。
  • ellipsis：あふれた部分を切り取り、末尾に省略記号「…」を表示します。

なお、text-overflow を機能させるには、以下の条件が必要です。

  • white-space: nowrap; を指定して、テキストを折り返さないようにする
  • overflow: hidden; を指定して、あふれた内容を非表示にする
  • 幅（width）を固定して、テキストがあふれる状態を作る

使用例

次のサンプルでは、同じテキストに対して text-overflow: clip; と text-overflow: ellipsis; をそれぞれ適用し、表示の違いを確認できます。

<html>
   <head>
      <style>
         p.text1 {
            white-space: nowrap;
            width: 200px;
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip;
         }
         p.text2 {
            white-space: nowrap;
            width: 200px;
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis;
         }
      </style>
   </head>
   <body>
      <b>元のテキスト：</b>
      <p>Tutorials Point originated from the idea that there exists a class of
      readers who respond better to online content and prefer to learn new skills at
      their own pace from the comforts of their drawing rooms.</p>
      <b>text-overflow: clip の場合：</b>
      <p class = "text1">Tutorials Point originated from the idea that there exists
      a class of readers who respond better to online content and prefer to learn
      new skills at their own pace from the comforts of their drawing rooms.</p>
      <b>text-overflow: ellipsis の場合：</b>
      <p class = "text2">Tutorials Point originated from the idea that there exists
      a class of readers who respond better to online content and prefer to learn
      new skills at their own pace from the comforts of their drawing rooms.</p>
   </body>
</html>

実行結果

CSSのtext-overflowプロパティとは？はみ出したテキストの表示方法を解説

上記のコードを実行すると、clip を指定した段落ではテキストが境界線の位置で無機質に切断されるのに対し、ellipsis を指定した段落では文末に「…」が付いて、続きがあることが視覚的に伝わります。

まとめ

text-overflow プロパティは、ニュース一覧や商品名など、限られたスペースで長いテキストを扱う場面で非常に便利です。特に ellipsis を使えば、情報が省略されていることをユーザーに自然に示せるため、UIデザインの品質向上につながります。white-space や overflow と組み合わせて使う点を覚えておきましょう。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります