はじめに
CSSを学びたいStep14です。特定の行数でテキストを省略するline-clampをご紹介します！！
成果物
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複数行テキスト省略の例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="multiline-ellipsis">
これは非常に長いテキストで、複数行にわたって表示されますが、指定された行数を超えると省略されます。これは非常に長いテキストで、複数行にわたって表示されますが、指定された行数を超えると省略されます。これは非常に長いテキストで、複数行にわたって表示されますが、指定された行数を超えると省略されます。
</div>
</body>
</html>
styles.css
.multiline-ellipsis {
display: -webkit-box; /* Flexboxの代わりにWebkit Boxを使用 */
-webkit-box-orient: vertical; /* ボックスの方向を縦に設定 */
overflow: hidden; /* はみ出した部分を隠す */
text-overflow: ellipsis; /* はみ出した部分を「...」で表示 */
-webkit-line-clamp: 3; /* 表示する行数を設定 */
line-clamp: 3; /* 非標準プロパティ（互換性のため） */
line-height: 1.5em; /* 行の高さを設定 */
max-height: 4.5em; /* 行数に応じた最大高さを設定 (1.5em * 3行) */
}
→実務でも利用する機会は多そうなので、知っておくと良さそうですね！！