triBlog

トリアナのブログ。

WEB制作
フロントエンド

便利!CSSだけで文字数制限

可変に対応するのありがたい。今日はカレーだ!
Avatar photo
あべ

レスポンシブが基本の現在。
デバイスによっては幅がバラバラなため中途半端な位置で … と省略されるの気持ち悪いですよね。
また、WPなどの動的なサイトの場合はphpでの文字数制限しても、全角半角、英数字だったりで文字自体の幅が違うので、綺麗に端まで表示できません。

そこで、CSSで要素から文字がはみでたら、「…」で省略という便利なCSS指定を2パターンご紹介します。

1行の場合の指定方法

文字列が1行の時に便利な指定方法です。
指定するCSSはこれ。

指定CSS

比較

指定なし

今日のご飯はなんじゃろな〜、カレーがいいな、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ

指定ありの場合

今日のご飯はなんじゃろな〜、カレーがいいな、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ

指定ありで短い文章の場合

今日のご飯はなんじゃろな

見事に、カレーの呪文が省略されました。
ちゃんと短い場合は表示しません。可変してもついてくるのでありがたい。
が、この方法、1行表示でのデザインしか使えないんですよね。

そこで、次に複数行の場合の適応方法を紹介いたします。

複数行の場合の指定方法

まってた!複数行!
CSS line-clamp を使います。
ただし、IEのみ対応しておりませんので、あしからず。

こちらが指定するCSSです。

指定CSS

比較

指定なし

今日のご飯はなんじゃろな〜、カレーがいいな、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ。コクをくわえるらしいね、チョコレート。サフランってオシャレな名前。タ〜メリックに、シナモン、カルダモン、いっぱいだべるもん!

指定ありの場合

今日のご飯はなんじゃろな〜、カレーがいいな、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ。コクをくわえるらしいね、チョコレート。サフランってオシャレな名前。タ〜メリックに、シナモン、カルダモン、いっぱいだべるもん!

指定ありで短い文章の場合

今日のご飯はなんじゃろな〜、カレーがいいな、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ。

追加したカレーの謎文章がちゃんと省略されました。
本格的にお腹がすいてきました。

ずっと書いてる間、脳内でインド人の「トゥルトゥルダダダ」と、小野Dの「カレーのうた」が流れているあべさんでした。

WEBサイトなどのご相談はこちらからどうぞ

記事を書いた人

Avatar photo
あべ ママコーダー

コード打って、オタ活して、3人の子育てママして、奥さんしてる書けないくらいclass属性だけは多いコーダーです。

あべ ママコーダー

コード打って、オタ活して、3人の子育てママして、奥さんしてる書けないくらいclass属性だけは多いコーダーです。

ページ上部へ