CSS Web制作 コーディング

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

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

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

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

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

WordPressで出力する投稿記事本文の文字数を制限する方法

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%;
}
heightとline-heightですが、line-heightを単位なしにしたい場合は以下になります。
p {
  height: calc(フォントサイズ * 1.5 * 2); /* 制限したい行数が2の場合 */
  line-height: 1.5;
}

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

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

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

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

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

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

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

 

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

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

これは上記のコードの line-heightを1.3emにしたものです。

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

 

beforeの背景色を変えてみる

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

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

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

 

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;
}

heightとline-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.


以上になります。

-CSS, Web制作, コーディング