【-webkit-line-clamp】CSSで複数行のテキストに三点リーダー(…)を付ける

  やりたい事 テキスト量が未定のエリアで複数行にわたるテキストを、ある決まった行数で三点リーダーに置き換えたい。 （画像の例で言えば４行までにしたい）   １行でいい場合は… 1行でいい場合のノウハウは既に一般化しているので、ここでは軽く触れる程度にする この実装は今現在どのブラウザ、どのデバイスでも使えるノウハウとなっている。   実装 ただし、スマホ向けWebサイト等を制作する場合、様々な端末を対象にするために 画面サイズなどがそれぞれ異なり、決まった文字組みでのマークアップを行う事は難しい。 いわゆるリキッドデザインのような可変のデザインの場合、１行に収まる文字数が変化するので プログラムによる◯◯文字以上は置き換え、のような仕組みもあまりよろしくない。 そこで 「-webkit-line-clamp」というスタイルを使用する。 以下抜粋 『-webkit-line-clamp』とは指定した行数の最後のテキストに『…』を表示させるプロパティです。使用するときは『-webkit-box-orient』で要素をフレキシブルボックスにしないと指定しても『…』は表示されず、『height』が指定されていない場合は『-webkit-line-clamp』で指定した行数で『…』が表示され、それ以降のテキストは表示されません。 http://wp-p.info/tpl_dictionary_rep.php?cat=dictionary-css&fl=text-overflow HTML CSS   注意すべき点は、-webkitのベンダープレフィックスを見て分かる通り 現状ではwebkit系のブラウザ（Chrome、safari）のみでしか使うことができない。 ただしスマートフォンに搭載されているブラウザは全てwebkitベースである事を考えれば スマホサイトにおいては十分実用出来るレベルだろう。(firefoxPhone？知らない子ですね…） 特筆すべき点は文字サイズ、表示文字数が端末によって変わった場合においても 適切な行数で三点リーダーを入れることが出来る点。 APIなどで取得してきたコンテンツの一部を頭出しするような部分でも使用する事が出来るだろう。