東京のホームページ制作会社・web制作会社
株式会社シンシエイト

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

CSS

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

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

やりたいこと

ただのoverflow:hidden

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

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

text-overflow:ellipsisを使う

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

結論

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

ブラウザ対応

text-overflow ellipsisのブラウザ対応

Can I use

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

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

三上 龍志
この記事を書いた人
三上 龍志
元パンパースのCMモデルがネタの株式会社シンシエイト代表。システムエンジニア出身営業育ち。ビーフジャーキー作りが趣味。webが大好きな2児の父。
関連する記事
スマホ対応したパンくずリストを改行しないで、横スクロールで見れるようにするCSS。
CSS
株式会社シンシエイト ブログ フロントエンド CSS CSSでテキストの末尾を「…」にして文章を1行にまるめる方法

web制作とマーケティングで
貴社の経営課題を解決します

web制作でのブランディングや、コンテンツマーケティング・SEO・ネット広告を中心としたウェブマーケティングを通じて、企業の事業を加速させるご提案をしています。

お電話でのお問い合わせはこちら

現在リモートワーク推進中のため、お電話が繋がりにくくなっております。
受付時間は平日10:00〜18:00です。セールス目的のお電話はご遠慮ください。