サムネのグラデーション、かわいくないですか?
記事の内容とは全く関係ないんですけど・・・笑
では本題へ。

幅や文字数を制限したいとき、割とよくあるのに毎回ググってしまうのでメモ・・・よく使うのに覚えられないシリーズです。

CSSで処理(幅をはみ出すと省略)

test{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

このやり方は1行の時のみ使えます。
複数行の省略には使えません。
IEはそのままだと使えないかもしれない。

JQueryで処理(特定の文字数で省略)

$(".test").each(function(){
    var txt = $(this).text(); //省略したいテキストを取得
    if(txt.length > 30){ //文字数を数えて30文字以上だったら
        txt = txt.substr(0, 30); //0から30文字目までを取り出して格納
        $(this).text(txt + "...");//取り出した文字列に...をつける
    }
});

こちらは特定の文字数で省略します。
複数行も対応しています。

positionとかで頑張って省略するタイプのものもやってみたのですが、
やっぱりJQueryのほうが楽かなという印象です・・・
そもそもシステム入る前提の場面では使わないものではありますが・・・