表示領域を超える長いテキストを
3点リーダー「…」などで省略して表示する方法

特にクライアントワークをしていると、自分が作ったサイトのレイアウトや枠組の中から、思ってた以上に文字列が長くブログ記事を書かれていたりで、想定してたレイアウトから崩れてしまっている…といった事が起こることがあります。

そういった時に、今回紹介する長い文字列を特定の位置を指定して3点リーダー（…）を使って省略する方法で、長くなりすぎた文字列があっても、指定した長さで文字列が省略されるのでレイアウトが崩れる事がなくなります。

今回はそんなCSSを使う事で、長い文字列でも意図したところで3点リーダーにて省略できる方法についてまとめています。

3点リーダーで省略する際は2パターンある

実際に使うコードをまずは見ていきたいと思うのですが、まずそもそもの大前提として、3点リーダーで省略するパターンには2パターンあります。

それが、1行だけの表示で使うのか、それとも複数行で使うのかというポイントです。

この1行のテキストを省略するのか、複数行にわたったテキストの最後を省略するのかで、使われるコードというのは異なるものになるので、その点だけしっかりとまず覚えておいてください。

1行で使うのが「text-overflow: ellipsis;」

1行で使う時にベースとなるコードがこれになります。
詳細はこの後に書いていきますが、テキストが表示領域からはみ出した場合、そのはみ出す箇所の最後を三点リーダー等にして表示して省略することが可能になります。

ただし、このtext-overflowは”はみだした箇所”を3点リーダーで表示するということになるので、これだけでは意図した動作はしてくれません。

実際には、どこからはみ出した部分を省略とするのか、という「枠」的なものを設定する必要があり、その枠からはみ出るところを、省略するという設定が必要になります。

そのため、実際はtext-overflow: ellipsis;と合わせて、

• overflow: hidden; （visible以外ならOKですがhiddenの設定がほとんど）
• white-space: nowrap; の設定

それぞれのコードについては後述しますが、この設定をすることによって、テキストが表示領域からはみ出した場合に3点リーダーで省略される形になります。

コードとしては下記のように記述します。

p.sample {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

これが1行でテキストの表示領域を超えていた場合に3点リーダーで省略する時の基準の形となり、この設定で親要素の横幅を超えるところまでテキストがあれば、最後は省略されて表示されます。

ただ実際に使われるシーンを想定すると、テキスト自体に設定することもありますし、親要素の表示領域をはみ出る場合に、3点リーダーで省略するといった親要素の中の要素に対して使うというケースもあります。

そして、表示領域をはみ出たらという前提条件になるため、widthの設定も必要になってくるケースもあります。（設定が無い場合は親要素、そこもなければブラウザの横幅が基準となります。）

例では、わかりやすくするためにテキスト用のdivにsampleというclassを与えて少し装飾を入れています。

<div class="sample">
<p>これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
</p>
</div>

.sample {
  max-width: 600px;
  margin: 50px 0px;
  padding: 25px;
  border: 3px #ccc solid;
  border-radius: 5px;
}

.sample p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

親要素のdivにmax-width: 600px;を設定し、それをはみ出るテキストを3点リーダーで表示する設定になりますが、実際にこれを実装してみると下記のようになります。

600pxの枠（paddingも25px入れてます）の端にさしかかったところで、長すぎるテキストが「…」で省略されているのがわかるかと思います。

それぞれのコードについて

では実際にコードを見ていきましょう。

text-overflow: ellipsis

これが今回で一番大事になるといっても良いCSSで、表示領域をはみ出たテキストをどう表示するかを決める要素となり、ellipsisと指定することで、自動的に3点リーダー「…」で表示するというものになります。

実はこのtext-overflowにはellipsis以外も用意されており、デフォルト値としてはclipとなり、これは何も表示しない（そのままカット）となります。

先ほどのサンプルを、ellipsisではなく、clipにすると、下記のように省略されずそのまま、表示領域をはみ出たところでぶった切る形で表示されます。

text-overflow: “”; で好きな省略文字を設定できる

また、””で表示したい文字を自由に決めることも可能です。
例えば、下記のように書く事で、「ー」といった表示にする事も可能です。

p {
  text-overflow: "－";
}

こうすると、最後は「－」で省略されることになります。

同じように、「 ……省略」ということにすれば、日本語として表示することも可能です。

p {
  text-overflow: " ……省略";
}

このように、3点リーダーでなく好きな文字列で表示する事もできます。
ellipsisの決められた3点リーダー「…」ではなく、「･･･」などを表示したいという場合などは自由に文字列を設定できます。

overflow: hidden;

これを一緒に設定をしておかないと、表示領域を超えた場合に非表示とならないため、セットで付ける事が必要になります。これを入れる事で、親要素の表示領域からはみ出たところを隠して、なおかつ、最後をtext-overflowで設定した省略系で表示するという設定になります。

white-space: nowrap;

そして最後のこの設定が、テキストを改行しないという設定になります。
そのため、通常であれば、親要素の横幅まで表示するテキストがあれば、自動的に改行されて折り返して表示されますが、この設定を入れる事で改行をせず折り返さないで表示する設定になります。

そのため、この3つの設定をすることによって、

1. 改行せず折り返さないため、表示領域を超えて表示（white-space: nowrap;）
2. 表示領域を超えたところは非表示（overflow: hidden;）
3. 最後を3点リーダー「…」で表示（text-overflow: ellipsis;）

という流れで、親要素の表示領域を超えたところを3点リーダーで省略して表示するというのが可能になるのです。

実際には1行のテキストを表示枠を超えた分を省略する場合は、この3つのタグをセットで使うことになります。

2行以上の複数行への対応の方法

しかしながら、上記の設定はwhite-space: nowrap;を設定する以上、改行をしないで表示ということになるため、1行での表示領域にしか対応しません。

例えば、ブログ記事の一覧の表示などで、見出し＋画像＋本文を抜粋して表示するようなレイアウトを作る場合など、本文で使われる内容によって行数がばらけてしまうといった事もあります。

そんな時はその本文を3行で自動的にまとめて、表示領域を超える分は3点リーダーで表示したいといったような複数行で使うケースがあるかと思います。

white-space: nowrap;を使う設定は、あくまでも1行対応用の設定になり、2行以上の複数行の場合は異なる設定をしなければなりません。

-webkit-box、-webkit-line-clampを使った設定

では複数行の場合は、どういう設定をすれば良いかというと、少しだけ複雑になりますが、

• display: -webkit-box;
• -webkit-box-orient: vertical;
• -webkit-line-clamp: 3; （行数を指定）
• overflow: hidden;

を使って設定していくことになり、-webkit-line-clampにて、何行で表示するかを決める事になります。実際のコードとしては下記のようになります。

<div class="sample5">
<p>これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
</p>
</div>

.sample5 {
  max-width: 600px;
  margin: 50px 0px;
  padding: 25px;
  border: 3px #ccc solid;
  border-radius: 5px;
}

.sample5 p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

こうすることで、複数行の対応も可能になります。
日本語や英語など、単語によって区切られる箇所に多少の違いが出てくる場合もあります。

このように、複数行にわたる場合でも設定をしっかり行って、最後を3点リーダーで省略させる事が可能です。ただ、1行の時のように最後の3点リーダーの文字をこの設定で変えることはできず、その場合は別のもっと細かな設定が必要になってしまうので、その点だけ注意しましょう。

まとめ

CSSで表示領域をはみ出る時に3点リーダーで省略する方法について見て来ました。
スマホで見られる事が多くなり、見るユーザーの環境によって今ではサイトも横幅が変わることも多くなっています。

そのため、自分の環境では1行で表示できていても別の端末では複数行にまたがって表示されている、といったケースはよく起こりえます。

そういう時、レイアウトが崩れないように表示領域を超えたら省略するという対策をしておけば、高さをわざわざ設定して複雑なレイアウトにしなくとも自動的にサイズに応じてテキストを省略してくれま

企業のオウンドメディアやコンテンツマーケティングのブログなどを構築する際は、記事一覧など何かのコンテンツ一覧の時に、テキストの量がコンテンツ毎で異なる時などには、よく使われるかと思います。

1行だけのときと、複数行の時とで使い方も変わってくるかと思いますので、使うケースに応じて対応していけるようにしましょう。