CSSでテキストの末尾を「…」にして文章を1行にまるめる方法

CSS

テキストは表示するけれど、さほど重要じゃないために全文表示しなくて良い場面で、文章の1行にして末尾を「…」と表示したい時ってありますよね。

CSS3ならたった3行で簡単に実装できるので、具体的に方法をご紹介します。

やりたいこと

ただのoverflow:hidden

こちらは当サイトのパンくずリストです。テキストが長くなると、右にはみ出してしまうのが難点です。この場合も末尾の「ウ」の途中で切れてしまって気持ち悪いですよね。

これをこんなふうに丸められたら綺麗ですね。

text-overflow:ellipsisを使う

このように、末尾を「…」にして文章を丸められるようにしたいと思います。

結論

.container {
    /* 改行しないで1行になるようにする */
    white-space: nowrap;

    /* はみ出し部分を隠す */
    overflow: hidden;

    /* テキストの末尾を「...」に変更する */
    text-overflow: ellipsis;
}

この3行だけでいけちゃうので便利です。CSS3なのでブラウザ対応状況はどうかというと。。。

ブラウザ対応

text-overflow ellipsisのブラウザ対応

Can I use

2020年4月時点で全ブラウザ対応されています。

これならブラウザによる表示の違いも心配なく安心して使えますね。

三上 龍志|株式会社シンシエイト
この記事を書いた人
三上 龍志|株式会社シンシエイト
【受けた恩を世の中へ】株式会社シンシエイト代表取締役|恩を繋いで世の中へ笑顔を増やす|IT業界18年|マーケティングに強いWeb制作会社|アイドルシティ開発・運営|元パンパースモデル|お受験全国模試で1位になり青山学院に入学するも高校留年・大学中退|ITベンチャーでエンジニア・マーケターを経て2015年創業
関連する記事
CSS
スマホ対応したパンくずリストを改行しないで、横スクロールで見れるようにするCSS。
CSS
マーケティングとWeb制作で
貴社の経営課題を解決します

市場調査や競合調査を始め、企業やサービスの優位性を理解した上で、UI/UX設計やコンテンツマーケティング、SEO・ネット広告を中心としたWebマーケティングを通じて、ビジネスを加速させるご提案をしています。