テキストに3点リーダーを反映させよう

問題

文字が長くてUIの見栄えが乱れてしまう時などに使用する
3点リーダーを表示させてみましょう。
テキストの3段目の最後に「...」を追加し、4段目以降は見えないようにしてください。

見本を参考にCSSファイルに記述してください。

自分の環境に書くコード

              <div style="width:200px;font-size:16px;border:1px solid;">
    <p>コチラはテストテキスト。コチラはテストテキスト。コチラはテストテキスト。コチラはテストテキスト。</p>
</div>
¥HTML¥

期待する画面

解答ソースコード

              <div style="width:200px;font-size:16px;border:1px solid;">
  <p>コチラはテストテキスト。コチラはテストテキスト。コチラはテストテキスト。コチラはテストテキスト。</p>
</div>
¥HTML¥

              div, p {
  margin: 0;
  padding: 0;
}
div {
    overflow: hidden;
}
div > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
¥CSS¥

解説

3点リーダーを使用する際は、親要素に対してoverflow: hidden;をかけて
はみ出したテキストを隠すようにします。

何行かになっているテキスト(今回だとpタグ)に対して
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
を付与しましょう。

-webkit-line-clamp: 3;の数字は、何段目で切るかを意味します。

ログインして解答を見る

今回作成した3点リーダーは、-webkit-というベンダープレフィックスが付いているため、Chrome や Safari のブラウザ限定になってしまいます。
ただこのプロパティを使うとかなり簡単に省略をかけることができます。

それぞれのプロパティの意味は下記の通りです。
display: -webkit-box; :フレキシブルボックス状態になる
-webkit-box-orient: vertical; :フレキシブルボックスの並び方向の指定
-webkit-line-clamp: 3; :表示する行数の指定