読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

select要素にtext-overflow:ellipsisを効かせる方法

スポンサードリンク

テキストが長いときなど、幅を超える分は三点リーダーに変えたいときがあるかと思います。

それがtext-overflow:ellipsisです。

しかし、select要素には三点リーダーが適応されませんでした。

そこでselect要素にも三点リーダーを聞かせる方法を調べてみました。

まずは、普通に実装した例です。

See the Pen JRGLbj by funclur (@funclur) on CodePen.

firefoxでは3点リーダーが付いていますが、IEchromeで効かないようです。

Stack Overflowで解決しました。

stackoverflow.com

See the Pen YGwaVG by funclur (@funclur) on CodePen.

簡単に説明すると空のdiv.viewportを用意しておきその中にセレクトした文字列を入れるという方法です。

レイヤー的には、select要素が一番上で文字色を透明(transparent)にします。

そうすることでselect要素のアクションも発生しますし、div内の文字列のためellipsisが効くというわけです。


意外とやりたいことを実現したいとなると手を焼くtext-overflow:ellipsisですが、select要素に三点リーダーを効かせたい場合は参考にしてみてください。