マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > 文字数が多い時の定番!CSSだけで「…」をつける

Mighty Ace Blog

マイティーBlog

デザイン

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アナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.