【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法

  • 2018年5月8日
  • CSS

よく使うので、コピー&ペーストしやすいようにまとめ。
タイトル通り、改行されるような長い文章を自動で省略して、末尾に三点リーダーを追加する方法です。

参考にさせていただいたサイトはこちらから。

CSSのみで文末をカットし、…を代入する方法|スターフィールド株式会社
https://sterfield.co.jp/designer/cssのみで文末をカットし、-を代入する方法/

 

早速紹介しますが、コードはこちら。

#text_area {
    width: 400px;
}
.text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
<div id="text_area">
    <p class="text">春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p>
</div>

text_area ID で、テキストの表示幅を指定しています。ここで指定した横幅を超えた分の文章が省略され、末尾に「…(三点リーダー)」が表示されます。

そして、text Class で指定されている text-overflow で、文字が指定した範囲から超えた場合の表示方法を指定しています。
今回は、ellipsis が指定されているので、範囲からはみ出た文章は切り取られ、切り取られた部分に省略記号「…」が表示されます。

white-space は、半角スペース・タブ・改行の表示の仕方を指定する際に使用するプロパティです。
今回指定した nowrap では、連続する半角スペース・タブ・改行を、1つの半角スペースとして表示する、という指定になっています。
これだけ見ると、もしかしてこのプロパティを省略されても表示されるのでは?と思ったのですが、この white-space プロパティがないと、文章の省略は無効化されました。
どれも必須の項目のようなので、自己判断で省略したりしないように注意してください。

ちなみに、今回の方法では、省略後の文章は1行で表示されます。
確か複数行の方法もあったように思いますが…気になる方は、調べてみてください。
機会があったら、このブログでも紹介するかもしれません。

 

以上、長い文章を省略して、末尾に三点リーダーを追加する方法でした。
スマートフォンなど、表示できる範囲が少ないときなどにおすすめのCSSですね。
もしくは PCでも、表示項目が多い表などでも活用できそうです。
お好みや要望に応じて使ってみてください。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG