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だけですね。

 

Leave a Reply

最初のコメントを頂けますか?

更新通知を受け取る »
avatar
wpDiscuz