文章量が多いときに使える便利な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;/*行数を指定*/
}

Request Materials資料請求

Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。

• ● web広告の改善事例が知りたい方
• ● 現在お願いしている代理店との比較をしたい方
• ● サービスの全体像・料金を知りたい方

資料請求

サービス概要・運用方針などを掲載！
アカウント分析の資料サンプルや実際の事例などサービスをご検討の方はぜひご一読ください。

ご相談お問い合わせ

Web広告をご検討中の方はお気軽にご相談ください。
お客さまの目的や広告運用状況に合わせて、最適なWeb広告運用プランをご提案いたします。