今日デザイナーさんから良いこと聞いちゃいました。
CSSだけで、文末に…が付与できちゃうんですって！
やり方はスタイルを３つ指定するだけ。
overflow: hidden;
white-space: no-wrap;
text-overflow: ellipsis;
以上です。
これで、文字列がはみ出てしまう場合に、はみ出る直前の文字に…が付きます。
実例
はてなブログの記事を例にします。
こちらは先日僕が投稿した記事です。↓↓
↑↑ 「今日初めてセマンティック〜」の１文を、途切れさせてみます。ちなみに、はてぶブログでは、１文は<p>で囲まれています。このpタグにスタイルを充てていきます。
充てたスタイルがこちらです。
200pxを越える部分については非表示化し、文末に...を付けます。
その結果がこちら。↓↓
きちんと…となっていますね！
ちなみに、ブラウザの対応状況はバッチリです。
まとめ
CSSだけで…がつけられるなんて…！
以前はこれを知らなくて、わざわざjQueryで...をつけていました…。なんてムダなスクリプト…。
今後はこの方法一択ですね。
参考：
