3

入力に ​​text-overflow: ellipsis を使用しようとしていますが、クロムと Firefox のみが問題を示しています。IE と Opera では何の効果もありません。ハックはありますか..

フィドル: http://jsfiddle.net/SZYFw/

input {
    text-overflow: ellipsis
}

<pre>
   <input type="text" value="Lorem ipsum dolor sit amet, consectetuer adipiscing elit.">​
</pre>

オペラのバージョン: 12.11 ビルド 1661 すなわちバージョン: 10

</p>

4

3 に答える 3

1

ここですべての互換性を備えた DIV で動作させることができましたが、残念ながら、ここで入力要素について何を言っているのかを確認してください...

オペラとの互換性:

-o-text-overflow: ellipsis;

このリンクも参照してください。Opera と IE ではサポートされていないと思います... しかし、ご覧のとおり、残りは完璧に動作します!

于 2012-12-14T10:08:47.627 に答える
0

CSS Basic U I ドラフトでは、「text-overflowインライン コンテンツがブロック コンテナーをオーバーフローした場合のレンダリングを指定する」。しかし、input要素にはコンテンツがありません。表示される値がありますが、値は要素のコンテンツではありません。

回避策を検討するには、入力テキストに省略記号を使用するコンテキストと目的を指定してください。通常の実装ではinput type=text、必要に応じて値を自動的に水平方向にスクロールし、ユーザーは入力ボックスの最後に到達したことを確認できます。

于 2012-12-14T10:49:13.067 に答える
-1

コードがないと仮定すると、省略記号は機能しません。

コードがこれに一致するかどうかを確認します。

display: inline-block;
*display: inline;
*zoom: 1;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
word-wrap: normal;
max-width: 130px;
vertical-align: bottom;

フィドル: http://jsfiddle.net/4mmQm/

これは IE 7、IE 8、IE 9、IE 10、Firefox、Chrome で動作します

于 2012-12-14T09:32:37.313 に答える