[CSS]テキストボックスで表示しきれないテキストを表示するスタイルシート

Post on:2010年4月26日

sponsors

表示しきれないテキストをマウスホバーで表示するスタイルシートをCSSplayから紹介します。

未表示のテキストがあることを明示するイメージを配置したデモもあります。

続きがあることをイメージで明示

最初のデモでは「text-overflow:ellipsis」が使用されており、省略されていることを示すために三つの点が表示されます。
※キャプチャはFxのため非対応

二番目のデモはその代わりにイメージを使用し、省略されているものが無い場合はそのイメージは表示されません。

対応ブラウザは、IE6/7/8, Fx, Op, Safari(PC), Chromeとのことで、現在主流のブラウザのほとんどで動作します。