基本的には以下で解決できる.しかしこれだと複数行には対応していない.
text-overflow: ellipsis;が末尾に…を指定する
overflow: hidden;が文字がはみ出そうになったときにはみ出た部分を消す
width: 200px;これはサンプルのために入れただけはみ出る幅を決める
white-space: nowrap;これは自動改行させないために記述
そうすると以下のように表示される.200pxを超えた分については・・・になる.
複数行対応に関して検索していたら以下のstack overflowにドンピシャな質問と回答があった
https://stackoverflow.com/questions/3404508/cross-browser-multi-line-text-overflow-with-ellipsis-appended-within-a-width-and
http://jsfiddle.net/k5VET/ にはデモも置いてくれている.
JQueryを使ってはみ出ている最後の単語を・・・に無理やり置き換えるJavaScriptコードを加えている.
