cssで長いテキストを…で省略する方法

MARKLEAPS

2022.07.25

お知らせ一覧のタイトル等、文字量によるレイアウト崩れを防ぐためにテキストを…で省略する方法。

・html

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

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

</div>

・css

.box01 {
	width: 350px;
	padding: 20px;
	border: 1px solid #EEE;
}
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.box01 {

width: 350px;

padding: 20px;

border: 1px solid #EEE;

}

.ellipsis {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

・html

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

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

</div>

・css

.line-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden; 
}

.line-clamp {

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

}

-webkit-line-clamp で表示する行を指定します。

CSS

よく読まれている関連記事