さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS】テキストの3点リーダー表示(複数行対応)

Pocket
LINEで送る

指定行数を超えたテキストを3点リーダー表示する対応をcssのみで行う方法。

scss

p {
	font-size: 13px;
	line-height: 1.6;
	height: 13 * 1.6 * 2 + px; // font-size * line-height * 表示する行数
	overflow: hidden;
	position: relative;

	&:before,
	&:after {
		background-color: #fff // 表示領域の背景色
		position: absolute;
	}

	&:before {
		content: "...";
		padding: 0 0 0 9px;
		top: 13 * 1.6 * (2 - 1) + px; // font-size * line-height * (表示する行数 - 1)
		right: 0;
	}

	&:after {
		content: "";
		height: 100%;
		width: 100%;
	}
}

カテゴリー:HP制作, css

コメントを残す

コメント内容