便利！CSSだけで文字数制限
レスポンシブが基本の現在。
デバイスによっては幅がバラバラなため中途半端な位置で … と省略されるの気持ち悪いですよね。
また、WPなどの動的なサイトの場合はphpでの文字数制限しても、全角半角、英数字だったりで文字自体の幅が違うので、綺麗に端まで表示できません。
そこで、CSSで要素から文字がはみでたら、「…」で省略という便利なCSS指定を2パターンご紹介します。
目次
1行の場合の指定方法
文字列が1行の時に便利な指定方法です。
指定するCSSはこれ。
指定CSS
|
1 2 3 4 5 |
.hamideru_1{ overflow: hidden; /* 要素からはみでたら出さないよ */ text-overflow: ellipsis; /* 省略されて表示されていない時の省略方法の指定 */ white-space: nowrap; /* 文字の折り返し禁止！ */ } |
比較
指定なし
今日のご飯はなんじゃろな〜、カレーがいいな、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ
指定ありの場合
今日のご飯はなんじゃろな〜、カレーがいいな、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ
指定ありで短い文章の場合
今日のご飯はなんじゃろな
見事に、カレーの呪文が省略されました。
ちゃんと短い場合は表示しません。可変してもついてくるのでありがたい。
が、この方法、1行表示でのデザインしか使えないんですよね。
そこで、次に複数行の場合の適応方法を紹介いたします。
複数行の場合の指定方法
まってた！複数行！
CSS line-clamp を使います。
ただし、IEのみ対応しておりませんので、あしからず。
こちらが指定するCSSです。
指定CSS
|
1 2 3 4 |
.hamideru_2{display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; /* 2行までOK */ -webkit-box-orient: vertical;} |
比較
指定なし
今日のご飯はなんじゃろな〜、カレーがいいな、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ。コクをくわえるらしいね、チョコレート。サフランってオシャレな名前。タ〜メリックに、シナモン、カルダモン、いっぱいだべるもん！
指定ありの場合
今日のご飯はなんじゃろな〜、カレーがいいな、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ。コクをくわえるらしいね、チョコレート。サフランってオシャレな名前。タ〜メリックに、シナモン、カルダモン、いっぱいだべるもん！
指定ありで短い文章の場合
今日のご飯はなんじゃろな〜、カレーがいいな、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ、トゥルトゥル、トゥルトゥル、トゥルトゥルダダダ。
追加したカレーの謎文章がちゃんと省略されました。
本格的にお腹がすいてきました。
ずっと書いてる間、脳内でインド人の「トゥルトゥルダダダ」と、小野Dの「カレーのうた」が流れているあべさんでした。
関連記事
記事を書いた人
コード打って、オタ活して、3人の子育てママして、奥さんしてる書けないくらいclass属性だけは多いコーダーです。
コード打って、オタ活して、3人の子育てママして、奥さんしてる書けないくらいclass属性だけは多いコーダーです。