楽天やヤフーショッピングのゴールド、トリプルでページを作成する場合どうしても長い商品名を省略したい場合ばあります。

2行で省略、3行で省略、簡単に実現できるCSSが下記、IEにも対応しています。

※IE対応で見栄えを揃えるため1行省略では定番の

を使用していません。

複数行を使用しない場合はシンプルに

で良いと思います。

参考 複数行にも対応!CSS を使ってはみ出した文字を「・・・」で省略する方法

jsで対応したい場合は

参考 line-clamp  https://css-tricks.com/almanac/properties/l/line-clamp/

Clamp.js

どこまで古いブラウザに対応させればいいにかは判断に迷いますが、みんな苦労しますね。

 

スポンサーリンク