はじめに
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; /* 必要に応じて幅を設定 */
}