6

だから私は、ある時点で機能するが、それがどうあるべきかではないものと組み合わせようとしていますword-break。text-overflow

たとえば、私はこのフィドルを設定しました

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行だけです。

4

1 に答える 1

3

私の知る限り、これは CSS では不可能です。

あなたができる唯一のことはheight、とを指定することですoverflow:hidden。(最後に省略記号はありません。)

これはtext-overflow の W3 仕様に記載されています。

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

これを実現するには、JavaScript を使用する必要があります。

jQuery プラグインの例を次に示します: http://pvdspek.github.com/jquery.autoellipsis/

于 2012-12-15T19:02:50.720 に答える