3行以上のテキストを非表示にする

この方法は高さが固定されてしまうので横並びのコンテンツだと表示が崩れてしまうことになります。
しかし、すべてのブラウザでサポートされています。

実装サンプル

CSS
コピー
.sample {
    font-size: 16px;
    line-height: 1.8;
    overflow: hidden;
    height: 5.4em; /* line-height 1.8 x 3em（行数） */
}

1行のテキストに3点リーダーを付ける方法

この方法は、行数の指定はできませんがすべてのブラウザでサポートされているので1行に決まっているときに使えそうです。

実装プレビュー

CSS
コピー
.sample {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

3行以上で最後に3点リーダーをつける（IE非対応）

この方法は高さが動的に変わりますがIEはサポートしていません。
あとは-webkit-box-orientは非標準のプロパティのようです。

実装プレビュー

CSS
コピー
.sample {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 行数 */
}

jQueryで動的に指定行数を変更する方法

ちょっとトリッキーですが、
今までのCSSとjQueryを使えば動的に最大行数を変更することもできます。

この記事では仮にボタンを押すと最大行数が変化するテキストを実装していきます。
JavaScriptだけ用意するのでHTMLとCSSは自由に実装してください。

実装プレビュー

JavaScript
コピー
function maxLine(selector, line){
   selector.css({
       '-webkit-line-clamp': String(line),
       'line-height': '1.8',
       'display': '-webkit-box',
       'overflow': 'hidden',
       '-webkit-box-orient': 'vertical',
   });
}
 
maxLine( $('.sample'), 2 );
 
$('#line_change2').on('click', function(){
   maxLine( $('.sample'), 2 );
});
$('#line_change3').on('click', function(){
   maxLine( $('.sample'), 3 );
});
$('#line_change4').on('click', function(){
   maxLine( $('.sample'), 4 );
});

まとめ

今回は CSSで指定行数を超えた時にテキストを非表示にする方法を解説しました。

-webkit-box-orientは非標準プロパティのようなので3点リーダーをつけたいというこだわりがなければ別の方法が無難かも知れませんね。
といいつつ今のところ一番汎用性があると思うので個人的には使っていきたいと思ってます。

また、WordPressとかであればその辺はPHPでも対応できると思うので調べてみるとよさそうです。