Tweet

Pocket

指定行数を超えたテキストを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%;
	}
}