CSS「-webkit-line-clamp」を使用して複数行にも対応した三点リーダー（…）を実装する

ブログなどの記事を一覧ページにも表示する場合、一行だと短すぎるけど全部出すのは長すぎる。
以前はPHPの「mb_strimwidth」を使用して文字数を制限して三点リーダーを実装していましたが、パソコンとモバイルとでは1行分の文字数が異なることや、半角英数字が加わると末尾の長さが微妙にずれたりしていたので、今回はCSSを使用した実装方法をメモ。

HTML

<p class="psot__item__description">数多くのホームページをご依頼いただいている中で、実際に株式会社衆が制作に携わった案件の中で使用している手法や、基礎知識に関しての備忘録を掲載。自社でホームページの制作やシステム開発を行われる際の参考例として、またはホームページをご依頼される際の予備知識としてお役にたてれば嬉しいです。</p>

CSS

.psot__item__description {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 50%;
}

「-webkit-line-clamp」の数字で行数を指定（例は3行で三点リーダー）。
widthで設定された幅いっぱいに3行分で三点リーダーが表示されます。

実装例

数多くのホームページをご依頼いただいている中で、実際に株式会社衆が制作に携わった案件の中で使用している手法や、基礎知識に関しての備忘録を掲載。自社でホームページの制作やシステム開発を行われる際の参考例として、またはホームページをご依頼される際の予備知識としてお役にたてれば嬉しいです。