要素からはみ出る文末に三点リーダー「…」を表示させるCSSの実装方法3パターン

三点リーダーCSS実装方法HTML / CSS

スポンサードサーチ


実装したいもの

文末が三点リーダー

このような新着情報やWordPressのリンクカードなどで見かける、要素からはみ出る文末に三点リーダー「…」で表示させるCSSを実装しようと思ったら途中で詰まってしまったので備忘録も兼ねて共有いたします。

三点リーダーCSS実装方法3パターン

三点倒立

紹介するのはCSS(Sass)のみで実装できるものです。

それぞれCodePenとコードをご紹介します。
CodePenの方は要素の範囲がわかりやすいように背景色をつけています。

コピペする方はCodePenの下に載せるコードをご利用ください。

ネコーダー
ネコーダー

実用的なのは①と②だね

パターン①1行ごとにつける方法

こちらは要素内で改行させずに文末に三点リーダーをつける方法です。

See the Pen 1行のみ文末三点リーダー by jookalubi (@jookalubi) on CodePen.

CSS

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

パターン②複数行の文末のみにつける方法(Sass)

こちらは複数行で改行をしながら、文末のみ三点リーダーにする方法です。
pをたくさんいれるとその分、要素は下に広がってしまうので、途中で改行させたい時は<br>を使えばOKだと思います。

こちらは途中で演算があるので、CSSだと難しいです。

See the Pen 複数行三点リーダー(Sass) by jookalubi (@jookalubi) on CodePen.

SCSS

@mixin abridgement($line-height, $font-size, $lines, $color) {
 overflow:hidden;
 position:relative;
 height:$font-size*$line-height*$lines+px;
 text-align:justify;
 word-break:break-all;
 line-height:$line-height;

 &:before ,
 &:after {
   position:absolute;
 }

 &:before {
 top:$font-size*$line-height*($lines - 1) +px;
 right:0;
 width:1em !important;
 background:$color;
 content:"...";
 text-align:center;
 }

 &:after {
 z-index:2;
 width:100%;
 height:100%;
 background:0;
 background:$color;
 content:"";
 }
}

.box {
 /*引数のフォントサイズと合わせる*/
font-size:14px;
 /*引数(line-height,font-size,表示したい行数,背景色)*/
 @include abridgement(2, 14, 5, #ffffff);
}

パターン③複数行で行数を指定してつける方法(Chrome,Safariのみ)

こちらは同じく複数行の文末を三点リーダーにする方法です。

とてもスッキリして楽なのですが、-webkit-から分かるように、IEやFirefoxが非対応なのであまり実用的ではありません。

See the Pen 複数行三点リーダー(webkitbox) by jookalubi (@jookalubi) on CodePen.

CSS

/*Chrome,Safariのみ*/
.box {
 overflow: hidden;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;/*三点リーダーにしたい行数*/
}

以上になります。

この実装を使うときは「続きを読む」などのリンクとセットにすると、ユーザーにとって優しいかと思います。
また新着情報だけでなく、表などtableレイアウトでも使えそうですね。

よく分からないプロパティがあると思いますが、理論や細かい事を知りたい方は、下記の参考サイトやMDNなどでお調べください。

スポンサードサーチ


jQueryでの実装

jqueryロゴ

調べていたらjQueryで制御する方法もありました。

仕組みは、高さを取得して最後の文字を消して「…」を追加するという、CSSとわりと似た方法だと思われます。

書かれた年月がわりと新しいので実用性は高いかと。
気になる人はこの方法でも実装してみてください。

お辞儀する猫

あとはTwitterで質問したときに、PHPで文字数のカウントなんかで制御する方法を提案してくださった方もいらっしゃいました。
PHPが得意な方はぜひお試しください。

参考サイト

参考にさせていただいたサイトです。ありがとうございました。

LIG

PSYENCE:MEDIA

コメント

タイトルとURLをコピーしました