この記事では、CSSを使って複数行の最後に3点リーダーで省略表示する方法を紹介します。以下のCSSを使用して、HTMLとCSSのサンプルコードを示します。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複数行の最後に3点リーダーで省略表示</title>
<style>
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<p class="line-clamp">
ここに長いテキストを入れてください。このテキストは3行に収まらない場合、最後に3点リーダーが表示されます。
</p>
</body>
</html>
各プロパティの詳細と値の種類
| プロパティ | 説明 | 値の種類 |
|---|---|---|
| display | 要素の表示方法を指定します。 | block, inline, inline-block, -webkit-box, etc. |
| -webkit-line-clamp | 表示する行数を指定し、それ以降の行は省略されます。 | 数値 |
| -webkit-box-orient | ボックスの子要素がどの方向に並ぶかを指定します。 | horizontal, vertical |
| overflow | コンテンツが要素のボックスに収まらない場合、どのように表示するかを指定します。 | visible, hidden, scroll, auto |
この方法を使用することで、簡単に複数行の最後に3点リーダーで省略表示を実現できます。ただし、この方法はWebKitベースのブラウザ（ChromeやSafari）でのみ動作し、他のブラウザでは対応していない場合があることに注意してください。
