CSSの単語区切りとテキストオーバーフローの組み合わせ

Question

word-breakとtext-overflowを組み合わせると、ある時点では機能しますが、どのように動作するかはわかりません。

は、例えば、私はこのFiddle

CSS設定したテキストは、それが箱を埋める必要がある部分に、テキストの末尾に破られると、明確にするため

width: 200px; 
padding: 8px; 
border:1px solid blue; 
word-break: break-word; 
height: 100px; 
overflow: hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 

があるべきです3ドット。 現在、1行で動作します。

Answer 1

私が知る限り、これはCSSを使用することはできません。

唯一可能なことは、heightとoverflow:hiddenです。 （最後に省略記号はありません）

これはW3 spec for text-overflowに記載されています。

省略記号
省略記号列は テキストオーバーフローが発生する各ボックスの境界に挿入されます。これらの省略記号文字列の値は 'text-overflow-ellipsis'プロパティによって決まる です。挿入が...テキスト
の ラインの最後の完全なグリフ表現の境界で言い換える
を行わ 、テキスト・オーバーフロー・モードのみに参加してブロック要素 のテキスト内容に影響を与えますそれ自身のインラインフロー。

これを達成するには、JavaScriptを使用する必要があります。ここで

は、jQueryプラグインの例です：http://pvdspek.github.com/jquery.autoellipsis/