指定した行数でテキストを省略表示するline-clamp プロパティの使い方

MARKLEAPS

2023.10.13

CSSのline-clamp プロパティを使えば、指定した行数でテキストを省略表示することができます。

line-clamp プロパティの使い方

・html

<p class="box01">
    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</p>

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

</p>

・css

.box01 {
	width: 300px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	 overflow: hidden;
}

.box01 {

width: 300px;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

}

・注意点
line-clampは単体では機能せず、次の4つを一緒に指定する必要があります。
・display: -webkit-box;（もしくは-webkit-inline-box）
・-webkit-box-orient: vertical;
・-webkit-line-clamp: 3; （省略表示する行数を指定）
・overflow: hidden;

・表示