bootstrap3で、はみ出した文字を省略する方法

bootstrapはレスポンシブなので、セレクトボックで選択する項目の文字数が長いと、それにつられてセレクトボックスまで長くなってしまいます。

なので、このはみ出した文字を省略する方法をメモしておきます。

例は、railsのhamlを使って書いています。

下のような場合ですと、未選択1111111111111111の1111111111111111の文字がはみ出ています。これを省略して表記できるようにします。

1
2
3
= f.collection_select(:product_id, Product.all, :id, :name,
{:include_blank => "--未選択11111111111111111111111111111111111111111111111111111111111111111111--", :selected => @select_option_product_val} ,
{:class => "form-control category_select_box"})

文字数を省略する方法はjavascriptをつかってゴニョゴニョやる方法もありますが、ここでは単純にcssだけをつかって、これを実現させます。

使うのはcssのtext-overflowです。

詳しい説明は、text-overflowに書いてあります。

今回は、bootstrapをカスタマイズしてform-controlにtext-overflowを追記するわけですが、bootstrapに上書きするように書くのはとてもよろしくないので、クラスを複数付与して、上書きします。

cssはこんな感じになります。

1
2
3
4
5
6
.form-control--extend {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100px !important;
}

あとは、これをhamlに追記するだけ。

1
2
3
= f.collection_select(:product_id, Product.all, :id, :name,
   {:include_blank => "--未選択11111111111111111111111111111111111111111111111111111111111111111111--", :selected => @select_option_product_val} ,
   {:class => "form-control form-control--extend  category_select_box"})