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

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

デモのキャプチャ

CSS3 - Text Overflow
デモ

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

デモのキャプチャ

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

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

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

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

top of page

©2017 coliss