楽天、ヤフーショッピングなどで商品名を3点リーダーで省略する＜複数行に対応CSS＞

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

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

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

を使用していません。

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

で良いと思います。

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

ただ、この方法だとレスポンシブデザインで文字が半分欠けて3点リーダーが表示される場合があり見栄えが良くありません。

line-clampプロパティを使用する

2019年現在、IEはサポート外ですがline-clampプロパティは主要なすべてのブラウザでサポートされています。もうIEは無視してもいいかな～と思うので今は「line-clamp」を使ってます。

CSSもとてもシンプルになりますね。

iOSブラウザ（サファリ）で3点リーダーの場所がおかしい

省略テキストがリンク文字の場合、末尾ではない部分に3点リーダーが出てしまう場合があるそうです。その場合はHTMLの文字を<span></span>で囲むと治るらしい。