CSS Web制作

【CSS】文字数制限(行数制限)して3点リーダーを表示させる方法(複数行、IE対応)

※ 当サイトではアフィリエイト広告を利用しています

文字列を文字数ではなく行数で制限して『・・・』と3点リーダーを表示させたいけどどうすればいいの?

ブログカードなどで本文を抜粋するとき、WordPressでは文字数制限をすることは出来ますが行数で制限することは出来ません(恐らく)

今回はCSSだけで文字数ではなく行数を制限する方法について解説していきます。

ちなみにWordPressで文字数制限する方法は以下の記事を参照下さい。

あわせて読みたい
【WordPress】出力する投稿記事のタイトルと本文の文字数を制限する方法
【WordPress】出力する投稿記事のタイトルと本文の文字数を制限する方法

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

文字数制限(行数制限)して3点リーダーを表示させる方法

今回解説する3点リーダーの表示方法は以下になります。

  • 1行の場合
  • 複数行の場合(IE非対応)
  • 複数行の場合(IE対応)
  • 3点リーダーなしでフェードアウト

それでは順番に見ていきます。



3点リーダーの表示方法(1行の場合)

HTMLの基本は以下になります。

<p>テキスト</p>

まずは1行の場合です。これは簡単です。

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

するとこのような表示になります。

See the Pen
3点リーダー(1行)
by junpei (@junpei-sugiyama)
on CodePen.



3点リーダーの表示方法(複数行の場合)

続いて本題である複数行の場合ですが、まずはIE非対応の場合を見てみます。

 

IE非対応の場合

IE非対応で良ければ簡単です。

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 制限したい行数が3の場合 */
  overflow: hidden;
}

するとこのような表示になります。

See the Pen
3点リーダー複数行(IE非対応)
by junpei (@junpei-sugiyama)
on CodePen.

 

IE対応の場合

IE対応の場合はちょっと難しくなりますが、基本的にコピペすればOKです。

まずHTMLですが、これまでとちょっと異なり以下になります。

<p>
  <span>テキスト</span>
</p>

CSSはこちらになります。

p {
  color: black;
  height: calc(1.5em * 2); /* 制限したい行数が2の場合 */
  line-height: 1.5em; /* heightと同じ値にする */
  overflow: hidden;
  position: relative;
  word-wrap: break-word;
}
p span {
  margin-right: 1em;
}
p::before {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 30% /* 背景色 */
  );
  bottom: 0;
  content: "…";
  padding-left: 1em;
  position: absolute;
  right: 0;
}
p::after {
  background: #fff; /* 背景色 */
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}

heightline-heightですが、line-heightを『単位なし』にしたい場合は以下になります。

p {
  height: calc(フォントサイズ * 1.5 * 2); /* 制限したい行数が2の場合 */
  line-height: 1.5;
}

beforeが3点リーダー、afterが文字数が超えなかった時に3点リーダーを隠す部分になります。

ちなみにafterが無いとこのようになります。

afterがない場合

afterがない場合

文字数が末尾に達していないのに3点リーダーがあるのは変ですよね?

そしてポイントは4つです。

  1. 制限したい行数をheight内に設定する
  2. heightとline-heightの数値は同じにする
  3. 3点リーダー右側の色は背景色と同じにする(before)
  4. afterのbackgroundも背景色と同じにする

それぞれがどういう役割をしているかをこれから解説します。

なお①はそのままの意味なので省略します。

 

『height』と『line-height』の数値を変えてみる

②は数値が違うとこのようになります。

『height』と『line-height』の数値が違う場合

『height』と『line-height』の数値が違う場合

これは上記のコードのline-height1.3emにしたものです。

これが0.1でも異なるとキレイに収まってくれないので、必ず同じ数値にしましょう。

 

beforeの背景色を変えてみる

③はグラデーションの色を変えてみるとこうなります。

グラデーションの色を変えた場合

グラデーションの色を変えた場合

ここは左右にグラデーションになっていて、左が透明、そして設定した色に変化していくという形になります。

ここを背景色と同じ色にすることで、自然な感じになります。

 

afterの背景色を変えてみる

④は先ほど書きましたが、『文字数が超えなかった時に3点リーダーを隠す部分』です。

この背景色を変えてみるとこうなります。

afterの背景色を変えた場合

afterの背景色を変えた場合

これがないと先ほどのように文字数が足りてないのに3点リーダーが表示されてしまうので、これを背景色と同じにすることで自然に隠すことが出来ます。

そしてこちらがデモです。

See the Pen
複数行3点リーダー
by junpei (@junpei-sugiyama)
on CodePen.



3点リーダーなしでフェードアウトさせる場合

もし3点リーダーは不要という場合は以下のような方法もあります(HTMLのspanタグはなくて大丈夫です)

p {
  background: #fff;
  height: calc(1.5em * 2); /* 制限したい行数が2の場合 */
  line-height: 1.5em;
  overflow: hidden;
  position: relative;
}
p::before {
    background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%, /* 背景色 */
    #fff 50%, /* 背景色 */
    #fff 100% /* 背景色 */
  );
  bottom: 0;
  content: "";
  height: 1.5em;
  position: absolute;
  right: 0;
  width: 3em;
}

heightline-heightですが、line-heightを単位なしにしたい場合は以下になります。

p {
  font-size: 16px;
  height: calc(16px * 1.5 * 2);
  line-height: 1.5;
  overflow: hidden;
  position: relative;
}
p::before {
    background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    #fff 50%,
    #fff 100%
  );
  bottom: 0;
  content: "";
  height: calc(16px * 1.5);
  position: absolute;
  right: 0;
  width: 3em;
}

こちらがデモになります。

See the Pen
3点リーダーなし(フェードアウト)
by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回は文字数制限(行数制限)して3点リーダーを表示させる方法を解説しました。

IE対応についても解説していますが、もう現在ではIE対応は不要かと思うので実装もかなり楽になると思います。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作