[解決済み】2行目にCSSの省略記号が表示される。

質問

CSS text-overflow: ellipsis を2行目に追加することは可能でしょうか？ネットで調べても出てきません。

の例です。

という感じです。

I hope someone could help me. I need 
an ellipsis on the second line of...

が、起こっていることはこうだ。

I hope someone could help me. I ... 

解決方法は？

の要件 text-overflow: ellipsis; が動作するのは、1行バージョンの white-space ( pre , nowrap など）。つまり、テキストが2行目に到達することはないのです。

エルゴです。純粋なCSSでは不可能です。

さっき全く同じものを探していた時の私のソース。 http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

EDIT CSSの良い神様が実装してくれるなら http://www.w3.org/TR/css-overflow-3/#max-lines を使えば、純粋なCSSでこれを回避することができます。 fragments (新規)と max-lines (新規)を追加しました。また、いくつかの詳細な情報は http://css-tricks.com/line-clampin/

EDIT 2 WebKit/Blinkには line-clamp : -webkit-line-clamp: 2 は2行目にellipsisを配置します。