• Home
  • Web制作
  • 【CSS】text-overflowプロパティで、はみ出すテキストをおしゃれに解決！

【CSS】text-overflowプロパティで、はみ出すテキストをおしゃれに解決！

schedule
Tags: CSS

はみ出すテキストにサヨナラ！text-overflowプロパティの基本をマスターしよう！

Webサイトを作成する時、誰もが一度はテキストの「はみ出し」問題に悩まされた経験があるのではないでしょうか？

例えば、

  • ボックスの幅が狭すぎて、テキストが収まりきらない…
  • データベースから取得したテキストの長さがまちまちで、レイアウトが崩れてしまう…

なんてこと、よくありますよね。

そんな時に役立つのが、CSSのtext-overflowプロパティなんです！

text-overflowプロパティを使うと、要素の幅からはみ出してしまったテキストを、どのように処理するかを指定することができます。

text-overflowプロパティの値

text-overflowプロパティには、主に以下の３つの値を設定することができます。

  1. clip（初期値）: はみ出した部分はバッサリと切り捨てられます。
  2. ellipsis（省略記号）: はみ出した部分に「…」という省略記号を表示してくれます。
  3. <string>（文字列）: はみ出した部分に、任意の文字列を表示させることができます。

text-overflow: ellipsis; を使ってみよう！

それでは、実際にtext-overflow: ellipsis;を使って、はみ出したテキストを省略記号で表現してみましょう。

.box {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="box">
このテキストは、ボックスの幅からはみ出してしまうほど長いテキストです。
</div>
このテキストは、ボックスの幅からはみ出してしまうほど長いテキストです。

上記コード例では、幅200pxのボックスを設定し、その中に長いテキストを記述しています。

text-overflow: ellipsis;を指定することで、ボックスの幅からはみ出したテキストは「…」という省略記号で表示されるようになります。

ポイント！

text-overflow: ellipsis;を有効にするためには、以下の2つのプロパティも合わせて指定する必要があります。

  • overflow: hidden; : 要素の幅からはみ出した部分を非表示にします。
  • white-space: nowrap; : テキストが折り返さず、一行で表示されるようにします。

実用的なテクニック！複数行のテキストに省略記号を表示させるには？

前述したように、text-overflow: ellipsis;は、一行のテキストに省略記号を表示させる場合に有効なプロパティです。

しかし、複数行のテキストに省略記号を表示させたい場合は、工夫が必要になります。

-webkit-line-clampプロパティで複数行のテキストを省略！

複数行のテキストに省略記号を表示させるには、-webkit-line-clampプロパティを使用します。

-webkit-line-clampプロパティは、テキストの表示行数を指定することができるプロパティです。

例えば、以下のように記述することで、テキストを3行で省略することができます。

.box {
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; 
  overflow: hidden;
  text-overflow: ellipsis;
}

ポイント！

-webkit-line-clampプロパティは、現時点ではSafariなどのWebKit系のブラウザでのみサポートされています。

JavaScriptを使って、動的に省略記号を表示させる方法も！

より柔軟に省略記号を表示させたい場合は、JavaScriptを使用する方法もあります。

JavaScriptを使えば、ブラウザの種類に関係なく、複数行のテキストに省略記号を表示させることができます。

まとめ：text-overflowプロパティをマスターして、美しいWebデザインを実現しよう！

この記事では、CSSのtext-overflowプロパティについて解説しました。

text-overflowプロパティは、テキストのはみ出しを解決するだけでなく、Webデザインの表現の幅を広げてくれる便利なプロパティです。

ぜひ、この記事を参考にして、text-overflowプロパティをマスターしてください！

関連記事