デザイン
2021.03.31
文字数が多い時の定番！CSSだけで「…」をつける
文章量が多いときに使える便利な3点リーダー。
文末の「…」を設定する方法はいくつかありますが、今回は基本のCSSをご紹介します！
1行でいい時はこれ！
/* 基本のコード */
<div class="box">
<p class="text">この文末に3点リーダーをつけたい時に役立つCSSをご紹介します。基本のコードなので、指定は誰でも簡単！</p>
</div>.box {
width: 400px;
/* 横幅指定。はみ出さない範囲が決まります。 */
}
.text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}「text-overflow: ellipsis;」では、指定された範囲からはみ出た文章が切り取られ、切り取られた部分に省略記号「…」が表示されます。
複数行指定する場合のCSS
.box {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;/*行数を指定*/
}
この記事に関連するタグ
正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）
Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。
リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。
