はじめに

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行) */
}

→実務でも利用する機会は多そうなので、知っておくと良さそうですね！！