KaoLog

ぽんこつwebデザイナーのスキルのメモ

複数行でも3点リーダーを利用してテキストを省略する方法をまとめてみた

f:id:s2lybb:20170722193545p:plain

 

 今回は長い文章を省略して表示するときの「…」についてまとめます。

JSを使う方法もありますが、今回はcssのみでの実装について説明したいと思います。cssのみだと1行の時しか適用されないと思われがちですが、そんなことはありません。今回は複数行でもしっかり適用される方法を説明します。

 

 

このようにテキスト領域が指定されており、テキスト量がその領域以上のものになりそうなときにおすすめです。

 

デザインの実装方法

実際の実装方法を見てもらうまえに、作成したいデザインを見てもらいたいと思います。

See the Pen 3点リーダーを利用してテキストを省略できる by Kaorin (@PANbooooo) on CodePen.

 

このように、ある一定の範囲でテキストが省略されるようになります。カードレイアウトやグリッドレイアウトなどのレイアウトにおすすめです。

 

それでは、実際にどう実装したのかを見てみましょう。

まずは、分かりやすくうするために、デザインのcssなどいらない部分を消してみましょう。

 

See the Pen 3点リーダーを利用してテキストを省略できる(デザインなし) by Kaorin (@PANbooooo) on CodePen.

 

とってもスッキリしましたね!!では、解説していきたいと思います。

 

HTMLについて

<div class="titleArea">
<p class="title">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div>

まず、divでテキストエリアの幅を指定します。ここで指定した範囲は、どの部分で三点リーダーをさすの出すのかに関わります。

次にpに表示させたいテキストを入れます。省略することを確認したいため、今回は長い文章にしています。

 

cssについて

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

全体を囲んだdivwidth:200px;を指定します。

次に、表示させたい文章を入れたpoverflow: hidden;で指定した範囲より外に出てしまったテキストに対して、「表示をしない」という指示をします。

そして、text-overflow: ellipsis;で、テキスト範囲に収まらない箇所に三点リーダーをつけます。この記述がとても大切です。

そして、white-space: nowrap;で開、改行を禁止させます。この記述をもし書かなかったら、最初に設定したwidth:200px;という範囲の中で広がってしまい、省略されなくなってしまいます。ゆえに、この記述もとても大切です。

 

複数行での省略について

See the Pen 複数行でも3点リーダーを利用してテキストを省略できる by Kaorin (@PANbooooo) on CodePen.

 

上記に記述した実装方法だと、white-space: nowrap;により、改行が出来なくなっており出来なくなっており、「複数行」にすることが難しくなっています。

 

そこで、複数行で省略の三点リーダーを付け加えたい場合は、white-space: nowrap;を消します。そして、display: -webkit-box;により、要素に高さをもたせます。次に、-webkit-box-orient: vertical;により、要素を垂直に重ねて表示させます。これにより、三点リーダーが表示されるようになります。最後に-webkit-line-clamp: 4;により、表示するべき行数を指定します。

 

cssだけで簡単に出来出来明ますし、できるようになるとデザインの幅も広がりますね!!ぜひとも試してみてください