【CSS】長い文字列の時に三点リーダーを表示する方法

・一つのCSSプロパティでは実現できず、複数のプロパティ設定が必要となる。

・基本となるプロパティ
　・overflowはhiddenを指定。スクロールは表示させない。
　・text-overflowはellipsisを指定。標準の三点リーダープロパティ。
　・word-breakはbreak-wordを指定。英数字羅列の場合でも折り返すために指定。

・次の三つのプロパティがポイント（safari/chromeで動作する）
　・displayは、-webkit-boxを指定。以下のプロパティが使えるようになる。
・-webkit-box-orientは、verticalを指定。基本これでOK。
・-webkit-line-clampは、3を指定。これは3行以上の場合に三点リーダーを表示するよう指定している。1を設定すれば、折り返さず1行で三点リーダーを利用できる。

・これらのスタイルをまとめて指定することで、実現可能となる。

使い方

.santen{
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}