フリーランス チャレンジ!!

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

フリーランス チャレンジ!!

週休4日制に俺はなる!

【HTML】長い文字を...で省略する方法(CSS)

技術 CSS

f:id:ksakae1216:20161023231507j:plain

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

 

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

 

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

 

 

長い文字を省略

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

 

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

 

省略コード

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

gist4523fdb9469e0ee73c9f227d38bc52de

 

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

 

ツールチップ

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

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

 

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

 

サンプル

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

codepen.io

 

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

 

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

 

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

 

最後に

結構簡単でしたね。

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