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

CSSでホバー時にあふれたテキストを表示する方法（overflow切替テクニック）

CSSを使えば、要素にマウスカーソルを合わせた瞬間（ホバー時）だけ、ボックスからあふれて隠れていたコンテンツを表示させることができます。限られたスペースに長いテキストを収めながら、ユーザーが必要に応じて全文を確認できるようにしたい場合にとても便利なテクニックです。

実装のポイント

この動作を実現するための基本は以下の3点です。

  • 通常状態では overflow: hidden; を指定し、ボックスからはみ出す部分を非表示にします。
  • :hover 疑似クラスで overflow: visible; に切り替え、ホバー時に全文を表示します。
  • white-space: nowrap; を指定すると、テキストが折り返されず1行で表示されます。

コード例

次のコードを実行し、青い枠の要素にカーソルを合わせてみてください。隠れていたテキスト全体が表示されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.demo {
            white-space: nowrap;
            width: 180px;
            overflow: hidden;
            border: 2px solid blue;
        }
         div.demo:hover {
            text-overflow: inherit;
            overflow: visible;
         }
      </style>
   </head>
   <body>
      <p>下のボックスにカーソルを合わせると、全文が表示されます：</p>
      <br>
      <div class = "demo" style = "text-overflow:clip;">Demo Text that will hide in this box.</div>
   </body>
</html>

動作の解説

このサンプルでは、div.demo に対して幅180pxを指定し、overflow: hidden; によって収まりきらないテキストを非表示にしています。テキストは white-space: nowrap; の効果で折り返されず、1行のままボックスからあふれます。

一方、div.demo:hover では overflow: visible; を指定しているため、カーソルが乗った瞬間にあふれた部分が表示され、テキスト全体を読むことができるのです。また text-overflow: inherit; を併せて指定することで、親要素の省略表示設定を引き継ぎます。

この手法は、表やリストなど横幅が限られたUIで長いラベルを扱う際に特に有効です。レイアウトを崩さずに情報を隠しつつ、インタラクションで全文を見せる、シンプルで実用的なパターンと言えます。

  1. CSSのdisplayプロパティとは？主な値と使い方を実例で解説

    CSSの display プロパティは、要素がWebページ上でどのように表示されるかを制御するための重要なプロパティです。ブロックレベルとして扱うか、インラインとして扱うか、あるいはFlexboxやGridレイアウトを適用するかなど、レイアウト設計の基本となる指定が可能です。 displayプロパティの主な値 display プロパティに設定できる代表的な値は以下のとおりです。 番号プロパティ値説明 1inline要素をインライン要素として表示します。 2block要素をブロックレベル要素として表示します。 3contentsコンテナ自身を非表示にし、子要素をDOM上の一段上の親要素の

  2. CSSでホバー時に要素を表示する方法【サンプルコード付き】

    CSSでマウスホバー時に非表示の要素を表示するには、:hover 疑似クラスと隣接兄弟セレクタ（+）を組み合わせるのが一般的です。以下に具体的なコード例を示します。 コード例 <!DOCTYPE html> <html> <head> <style>    body{       margin:20px;       padding:20px;       font-family: 'Segoe UI', Tahoma,