4

私は次のようなHTMLコードを持っています：

<div style="width:100px;border: 1px solid red;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 auto">
    <span style="float: left">LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft</span>
</div>

しかし、ellipsisうまくいかないようです。floatの属性を削除するspanと、「LeftLeft...」で通常の方法で表示できます。互いに対立しますtext-overflowか？float

4

3 に答える 3

5

text-overflowプロパティの仕様は、

このプロパティは、インライン コンテンツがそのブロック コンテナー要素 (「ブロック」) を「可視」以外の「オーバーフロー」を持つインライン進行方向にオーバーフローする場合のレンダリングを指定します。

フローティングの子はインライン コンテンツではなく、特別な種類のブロック コンテンツと見なされます (それらの計算値はdisplayですblock)。text-overflowそのため、幅の制限とともに独自のプロパティが必要です(このプロパティは継承されないため)。例えば

<div style="width:100px;border: 1px solid red;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 auto">
    <span style="float: left; max-width: 100%; overflow:hidden;text-overflow:ellipsis;">LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft</span>
</div>

( JSfiddle を参照)

于 2013-09-07T22:39:16.320 に答える
0

はい、親要素のオーバーフロー CSS プロパティを考慮し、プロパティが auto または hidden に設定されている場合、親は float を含むように拡張され、後続の要素に対して効果的にクリアされます。

そのため、float プロパティはまったく機能しません。

誰かがハックしているかどうかはわかりません。

ドキュメントを確認してください http://www.w3.org/TR/css3-box/#float CSS3用ですが、CSS2にも適用されます。

于 2013-09-07T21:38:07.653 に答える
0

span 要素でこのスタイルを使用してみてください:

<span style="float:left; overflow:hidden"><!--Content--></span>
于 2012-06-20T06:43:26.293 に答える