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

村上 著者:村上

【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でも、表示項目が多い表などでも活用できそうです。
お好みや要望に応じて使ってみてください。

  • この記事いいね! (0)

著者について

村上

村上 administrator

2 件のコメント

【JavaScript】長い文章の文末を省略して末尾に「…」を表示させる方法 – 株式会社シーポイントラボ | 浜松のシステム開発会社投稿日:8:25 pm - 5月 9, 2018

[…] 【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法 https://cpoint-lab.co.jp/article/201805/【css】長い文章の文末を省略して末尾に「」を/ […]

【CSS】複数行の長い文章の文末を省略する方法 – 株式会社シーポイントラボ | 浜松のシステム開発会社投稿日:8:08 pm - 5月 23, 2018

[…] 【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法 https://cpoint-lab.co.jp/article/201805/【css】長い文章の文末を省略して末尾に「」を […]

コメントは停止中です。