CSS 文字数を制限して、オーバーしたものを３点リーダーに変える

はじめに

カレンダーのセルに、ユーザーが入力した文字を入れたいのですが、セル自体が狭い為、文字数を制限して表示、クリックした際に全文を見ることができるようにしたかった場合の対応です。

イメージ図

1行の場合

こちらは簡単。

white-space: nowrap; // 改行しない
overflow: hidden; // セルからはみ出るものは非表示
text-overflow: ellipsis; // ３点リーダーをつける

上記で、下記のように表示されました。

ただ、行いたいのは複数行だったため、こちらの記述では実現できませんでした。

複数行の場合

ネットで調べると色々出てくるのですが、CSSのみで実現しなければならない状況下でしたので、
下記記述を行いました。

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; // 2行まで表示
    overflow: hidden; // スクロールバーをなくす

現状は、ChromeとSafariでしか使用できない模様ですが、
基本的な表示であればこちらで対応できそうです。

webkit-boxのwebkitって何？となるのですが、
こちらはcss独自の機能ではなく、
Appleが開発したオープンソースのHTMLレンダリングエンジン=HTMLやCSS、XMLなどを解釈して、アレンジを加えて表示するもの、とのことでした。

ここでは、「セルをボックス形式に変えて、縦方向に2行まで表示するよ」という意味。

さいごに

Laravelにて、ビューをPDFを生成するライブラリ「snappy」を使用して、複数行の場合に文字数制限を使用する目的で調べていました。
結局、snappyの仕様上、webkit-boxが　適用されませんでした。
よって、PHPのロジックで文字数を制限することにしました..。