はじめに

CSSを学びたいStep13です！長い文字を省略するellipsisを紹介します！

成果物

ソースコード

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="ellipsis">これは非常に長いテキストで、幅を超えると省略されます。</div>
</body>
</html>

styles.css

.ellipsis {
    white-space: nowrap; /* テキストを折り返さない */
    overflow: hidden; /* はみ出した部分を隠す */
    text-overflow: ellipsis; /* はみ出した部分を「...」で表示 */
    width: 200px; /* 必要に応じて幅を設定 */
}