コンパイラかく語りき

import { Fun } from 'programming'

CSSだけで文末に「…(三点リーダー)」をつける方法

今日デザイナーさんから良いこと聞いちゃいました。

CSSだけで、文末に…が付与できちゃうんですって!

 

やり方はスタイルを3つ指定するだけ。

overflow: hidden;

white-space: no-wrap;

text-overflow: ellipsis;

 

以上です。

これで、文字列がはみ出てしまう場合に、はみ出る直前の文字に…が付きます。

 

実例

はてなブログの記事を例にします。

 

こちらは先日僕が投稿した記事です。↓↓

 

f:id:chuck0523:20151224235100p:plain

 

↑↑ 「今日初めてセマンティック〜」の1文を、途切れさせてみます。ちなみに、はてぶブログでは、1文は<p>で囲まれています。このpタグにスタイルを充てていきます。

 

充てたスタイルがこちらです。

f:id:chuck0523:20151224235104p:plain

200pxを越える部分については非表示化し、文末に...を付けます。

 

その結果がこちら。↓↓

f:id:chuck0523:20151224235108p:plain

 

きちんと…となっていますね!

 

ちなみに、ブラウザの対応状況はバッチリです。

f:id:chuck0523:20151224235637p:plain

 

まとめ

CSSだけで…がつけられるなんて…!

以前はこれを知らなくて、わざわざjQueryで...をつけていました…。なんてムダなスクリプト…。

今後はこの方法一択ですね。

 

参考:

tacamy.hatenablog.com