文字列の長さによってレイアウトが崩れるような状況の際、レスポンシブ対応のページだとスマホで表示できる文字数が違っていたりするので、サーバサイドで文字列制限かけるのがベストな方法とは言えないようなケースがあります。
ここではクライアントサイドにて、表示幅を超える文字数の場合は省略して「…」を最後に追加する方法を紹介します。

1行の場合 -text-overflow

例えば、表示枠が1行固定であればtext-overflowの設定で実現可能です
この方法はie6から実装されており、今あるほとんどのブラウザで問題なく表示されます。

HTML部分は特別な設定はありません。
ここではCSSからアクセスできるようにクラス名を指定しています。

<div class="box-read">
秋の野駆けでございます。上目黒へお出かけになりまして、あっちこっちと飛び回った末、野立ち所、まぁ、休憩所ですが、これでもって腰掛けて、一服呑んでますってぇと、ちょうど、昼時分です。近所の百姓家で焼いてる秋刀魚の匂いが、プンプーンっと入ってきました。
</div>

CSSにて、overflow、text-overflow、white-spaceにそれぞれ必要な設定を指定します。

.box-read{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

三点リーダーを実現するためのCSS設定

• overflowプロパティをhiddenに設定
  枠を超えた文章を見えないようにします。
• white-spaceプロパティをnowrapに設定
  改行されないようにします。
• text-overflowプロパティをellipsisに設定
  三点リーダー（…）を表示するための指定です。

結果は下記になります。

この方法は複数行に対しては有効ではありません。

複数行の場合

CSSだけだと三点リーダーの具合があまりよろしくなく、JavaScriptを使ったほうが良さそうです。

• 文字列を省略して「…」を付与する方法 – CSS/jQuery

使用例は下記になります。