6

テキストが長すぎる場合に省略記号を表示するように入力フィールドを設定するにはどうすればよいですか? 入力フィールドは読み取り専用で、幅は 100% に設定されています。

これは可能ですか？そうでない場合、JavaScript でどのようにしますか?

注: これは Chrome では機能するように見えますが、Android ストック ブラウザーでは機能しません。

入力フィールドの現在のCSS：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

ありがとう！

4

4 に答える 4

5

要件に応じて、CSS を使用text-overflowしてこれを実現できます。

HTML:

<input disabled="disabled" value="really really long text that will be trunked" />

CSS

input{
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    width: 100px;
}

デモ: http://jsfiddle.net/yrPc8/

于 2013-08-05T08:31:39.837 に答える
1

この回答が参考になると思います

クラスを作成してHTMLに適用できますtextbox 

<input type="text" readonly value="Lorem ispum dolor sit amit Lorem ispum dolor sit amit Lorem ispum dolor sit amit Lorem ispum dolor sit amit " class="ellipsis">

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

Benによると、Android CSSのテキストオーバーフローの問題を修正するには

*{
    text-rendering: optimizeLegibility;
}

ここでライブをチェックしてくださいhttp://jsfiddle.net/b4YjX/

于 2013-08-05T08:30:53.683 に答える
0

次のコードはテスト済みで動作します。お役に立てば幸いです。

.input{
overflow:hidden;
text-overflow:ellipsis;
width:100%;
}
于 2013-08-05T09:01:18.080 に答える
0

これは、Android ブラウザーの制限/バグのようです。text-overflow: ellipsisどのinput要素にも実装できないようです。

たとえば、 の代わりに<input name=foo value="some long string here" width=100%>、次のように使用できます。

<style>
.hidden { 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%; 
}
</style>
<div class=hidden>some long string here</div>
<input type=hidden name=foo value="some long string here">

読み取り専用フィールドの場合、簡単な回避策があります。最初にdivを設定した (たとえば) 要素にデータを複製しtext-overflow: ellipsis、次に非表示フィールドに複製します。最初の要素を読み取り専用フィールドのようにスタイルしたい場合がありますが、通常のテキストのままにしておくと、このデータは通常の方法では編集できないことがユーザーにさらに明確になります。

小さなデバイスではいつものように、通常、実際のデバイスの幅に対応さ<meta name="viewport" content="width=device-width,initial-scale=1">せるようなものが必要です。100%

于 2013-08-05T10:26:14.153 に答える