【HTML】長い文字を…で省略する方法（CSS）

みなさん、コウタロウです！！

今日はタイトルについて。

HTMLとか技術的な話なので興味ない方はスルーでお願いします！

現在の案件で長い文字列を表示する場合、ある程度の長さ以降は省略してマウスオーバーでツールチップ表示してほしいという要望がありました。

AngularJs、CSSのどちらでもできるそうですが、CSSが手軽だったので今回はCSSのやり方をご紹介します。

下記CSSコードで長い文字列を「…」で省略します。

クラス名は”short”としました。

省略されない全文をツールチップで表示します。

省略されたコードをマウスオーバーするとツールチップが表示されます。

タグの中に”title”と記載し、ツールチップで表示したい文字をダブルクォーテーションで括るだけ。

早速、長い文字を省略したものとツールチップのサンプルを見てみましょう。

CSSで”short”クラスを作成し、省略したい文字列”あいうえおかきくけこ”のタグにクラスを指定するだけ。

表示したい文字列の幅はCSSの”width”で幅を調整して下さい。

また、”title”も記載しているので”あいうえお…”にマウスを合わせるとツールチップで省略された文字も含めた全文が表示されます。

結構簡単でしたね。

今回のようにやりたいことを簡単にできるのが一番！！