1行で収まらないテキストを省略したい
ボックスに収まりきらない長いテキストを表示するときに、末尾を「・・・」に置き換えて省略するCSSプロパティがあります。それが「text-overflow」プロパティです。画像のサムネイルとキャプションが並ぶ「ギャラリーページ」やブログページの関連項目へのリンクなど、テキストを表示するためのスペースがあまり大きくない場合に使用すると便利です。長いテキストを省略して末尾「・・・」にしたいときは、テキストが含まれるボックスに次のCSSを適用します。
書式：収まりきらないテキストの末尾を省略するCSS
overflow: hidden;
white-space: nowrap;
text-overflow: elipsis;なお、text-overflowプロパティに適用できる値には「elipsis」と「clip」があります。値をclipにした場合、長すぎるテキストは省略されますが、「・・・」は表示されません。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
.box{
border :1px solid #ccc;
padding:20px;
width: 300px;
border-radius: 10px;
}
.caption{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box">
<img src="images/春.jpg" alt="">
<p class="caption">この春は気候が温かく花爛漫に咲き誇っています。</p>
</div>
</body>
</html>実行結果
