Compass(Sass)でテキスト省略(ellipsis)を楽に書く

goto_jp 1,040views 更新:2014年3月28日

テキストが一定幅に収まらなかった場合「…」と省略するCSS手法に text-overflow:ellipsis を使う方法がありますが、Compassの記述を使えば一行でクロスブラウザ対応まで済ませます。

Sass側の記述は下記。

.box {
    @include ellipsis(no-wrap);
}

CSSに下記のように出力されます。

.box {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません