Coding

PHPを使わずにCSSで文字列を丸める

phpのmb_strimwidthを使うと、文字のサイズによって変わったり、そもそもいい感じに文字数制限できないんですよね

注意事項

基本的にここの方法はIEを捨ててます。

HTML

使用するHTMLはこれです。

<p class="name">ほげだほげおほげだほげおほげだほげお</p>

1行の場合

一行の場合は現在のブラウザならほとんどがサポートできます。

.name
width: 3em
overflow: hidden
white-space: nowrap
text-overflow: ellipsis

サポート状況

http://caniuse.com/#search=white-space
http://caniuse.com/#search=text-overflow

考察

IEが対応してないんですよね。

複数行の場合

こちらはかなりサポートブラウザが絞られます。

.name
display: -webkit-box
-webkit-box-orient: vertical
-webkit-line-clamp: 3 // 3行
  box-orient: vertical
line-clamp: 3 // 3行

サポート状況

http://caniuse.com/#search=webkit-box
http://caniuse.com/#feat=css-line-clamp
https://developer.mozilla.org/ja/docs/Web/CSS/box-orient

考察

Firefoxは”line-clamp”に対応してないので、webkitを使ってChromeとSafariだけですね。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コーディング代行

高品質なソースコードをお約束いたします。

詳しくはこちら
背景はFreepikによるデザイン

information

お問い合わせ