CSSだけで複数行3点リーダーを表示させる方法【IE対応】

3点リーダなんてCSSで簡単にできそうで意外と複雑です。

CSSだけで複数行3点リーダーを表示させる方法を解説します。IE対応です。

3点リーダ　完成形

ブラウザの幅が広いと文章が右下に達しておらず3点リーダが表示されません。ブラウザ幅を狭くしてみてください。文章が右下に達し3点リーダが表示されます。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

html

<p class="clamp"><span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span></p>

CSS

.clamp{
	position: relative;
    line-height: 1.25;
	height: calc(1.25em * 3);
	overflow: hidden;
    background: #FFF;
    border: 1px solid #000;
}
    
.clamp span{
    margin-right: 1em;
}

.clamp:before {
	content: "…";
	bottom: 0;
	right: 0;
	position: absolute;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30%);
	padding-left: 1em;
}

.clamp:after {
	content: "";
	width: 100%;
	height: 100%;
    margin-left: -1em;
	position: absolute;
	background: #FFF;
}

3点リーダ　CSS解説

枠

.clamp{
	position: relative;
	line-height: 1.25;
	height: calc(1.25em * 3);
	overflow: hidden;
	background: #FFF;
	border: 1px solid #000;
}

line-heightで1行の高さを決めます。

heightでは何行まで表示可能か指定します。line-height×表示したい行数を指定しましょう。

borderは指定不要です。（わかりやすくするためにつけています。）

paddingは指定しないでください。必要なら.clampの外に要素を追加し、そこでpaddingなど調整しましょう。

文章部分

.clamp span{
    margin-right: 1em;
}

横幅ピッタリ1行・2行になったとき、右下にある3点リーダが表示されないように「3点リーダを隠す部分」を改行させるために右に1文字分（「…」の幅分）余白を確保します。

3点リーダ部分

.clamp:before {
	content: "…";
	bottom: 0;
	right: 0;
	position: absolute;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30%);
	padding-left: 1em;
}

これは常に右下に存在します。文章より上にあり、.clamp:afterよりは下にあります。

背景色は白から透明のグラデーションにしています。
文字がグラデーションで切れるので続きがある感じはできていると思います。

↓以下は「.clamp:after」を消し、枠の背景を変更した例です。

文章が右下に達していなくても「…」が常に右下にあります。
ブラウザ幅を狭くすると文章が「…」に隠れることがわかるかと思います。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

3点リーダを隠す部分

.clamp:after {
	content: "";
	width: 100%;
	height: 100%;
	margin-left: -1em;
	position: absolute;
	background: #fff;
}

文章が右下まで達していないとき「…」を隠す部分です。

文章の後ろにくっついており3行目まで達すると折り返され4行目になり 「…」 が現れます。

↓イメージしやすいように色を付けてみました。
ブラウザ幅を変えてみてください。
文章の右下に常にあり、文章が右下に達すると下に改行されるのがわかるかと思います。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

　

　

理解しようとすると難しいのでとりあえずコピペで使ってみてください。

スマホだけでいいならCSS数行で済む

ブラウザの幅が広いと文章が右下に達しておらず3点リーダが表示されません。ブラウザ幅を狭くしてみてください。文章が右下に達し3点リーダが表示されます。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

html

<p class="clamp">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

CSS

.clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    border: 1px solid #000;
  }

上記はIEでは効きません。スマホだけでいいなら上記の指定方法でいいです。

-webkit-line-clamp: では何行目に「…」3点リーダをつけるか指定します。

borderは指定不要です。（わかりやすくするためにつけています。）

paddingは指定しないでください。必要なら.clampの外に要素を追加し、そこでpaddingなど調整しましょう。

1行で3点リーダをつけるならCSS数行で済む

ブラウザの幅が広いと文章が右に達しておらず3点リーダが表示されません。ブラウザ幅を狭くしてみてください。文章が右下に達し3点リーダが表示されます。

テキストテキストテキストテキストテキストテキストテキストテキストテキ

html

<p class="clamp">テキストテキストテキストテキストテキストテキストテキストテキストテキ</p>

CSS

.clamp {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #000;
    padding: 10px;
}

paddingも使えますしIEでもOKです。

まとめ

複数行の3点リーダは可能です。上記をコピペして活用してくださいね。

以上、CSSだけで複数行3点リーダ【IE対応】でした。