CSSで文字数制限

トップページなどに トピック一覧や、サムネイル付きの記事を表示する際には
記事毎のタイトルの長さや、サマリーテキストの文字数が大きく違う場合があります。

そんな時には、親要素の幅を超える場合には 「...」をつけて省略してくれる
ただし、Edge、Chrome、Safari限定

を指定してみてください。

で行数を指定できますので、複数行のサマリーテキストの場合でも対応できます。

トップページでは 下記の画面キャプチャ赤枠のところで採用しています。

 

すべてのブラウザに対応する場合は
こっちを試してみてください。 表示したい記事の
height, line-height を指定するだけで 領域を超えそうなら「...」を表示してくれます