search
LoginSignup
6

More than 1 year has passed since last update.

posted at

updated at

行数の指定、その行数を超えた場合に非表示にする(cssのみ)

cssだけで行数の指定をするやり方
①2行以上の時は文字を非表示にする
②2行以上の時は二行目の最後に三点リーダーをつける
③◯行以上で非表示

※jsでもできます。
②のやり方だとIE11非対応です。(多分)

index.html
<p class="line_wrap">テキストの文章を2行を超えたら表示したく無いです。且つ、レスポンシブ対応にしたいです。</p>

①2行以上の時は文字を非表示にする

style.css
.line_wrap {
  overflow: hidden;
  height: 3.6em /* 2em(行)x line-heightの1.8 */
  font-size: 16px;
  line-height: 1.8;
}

表示したい行数 * line-height
をheight(単位em)にしてoverflow:hiddenするだけ。
3点リーダーはありませんが、2行以上の場合は文字が表示されません。
スクリーンショット 2020-03-10 17.42.29.png

②2行以上の時は二行目の最後に三点リーダーをつける

style.css
.line_wrap {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

2行以上の場合はちゃんと三点リーダーが表示されます。(レスポンシブ対応)
スクリーンショット 2020-03-10 17.40.59.png
どちらがいいかはお好みで。

◯行以上で非表示

表示する行数をカスタマイズするときはこれが便利。

行数を指定したい(3行、4行,,,)時に以下のコードを使用できます。
△が指定する行数。

style.css
.line_wrap{
 line-height: ;
  font-size: rem;
 height:calc( * rem *△);
 overflow:hidden;
}

参考サイト

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
6