Come mostrare i puntini di sospensione su un campo di input di sola lettura nel browser di serie Android?

Question

Come si imposta un campo di input per mostrare i puntini di sospensione se il testo è troppo lungo? Il campo di input è di sola lettura e la sua larghezza è impostata su 100%.

È possibile? In caso contrario, come si fa in JavaScript?

Nota: anche se questo sembra funzionare su Chrome, non funziona sul browser azionario Android.

Il mio attuale CSS per il campo di inserimento:

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

Grazie!

Answer 1

penso che questo vi aiuterà a answer

È possibile creare una classe e applicarlo sul tuo textbox
HTML

<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; 
} 

per risolvere i problemi Android CSS text-overflow in base alle Ben

*{ 
    text-rendering: optimizeLegibility; 
} 

Controllare che vivono qui http://jsfiddle.net/b4YjX/

Answer 2

A seconda delle esigenze, è possibile utilizzare i CSS di text-overflow per raggiungere questo obiettivo:

HTML:

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

CSS

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

demo: http://jsfiddle.net/yrPc8/

Answer 3

Il seguente codice è stato testato e funziona, spero che vi aiuterà!

.input{ 
overflow:hidden; 
text-overflow:ellipsis; 
width:100%; 
} 

Answer 4

Questo sembra essere una limitazione/bug nel browser Android: sembra non riuscire a implementare text-overflow: ellipsis su qualsiasi elemento input.

Ad esempio, invece di <input name=foo value="some long string here" width=100%>, è possibile utilizzare

<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"> 

Per un campo di sola lettura, c'è una soluzione semplice: duplicare i dati, prima in (diciamo) div elemento, sul quale si imposta text-overflow: ellipsis, e poi in un campo nascosto. Si potrebbe desiderare di modellare il primo elemento in modo che assomigli ad un campo di sola lettura, ma mantenerlo come testo normale renderebbe ancora più chiaro all'utente che questi dati non possono essere modificati usando mezzi normali.

Come al solito con dispositivi di piccole dimensioni, normalmente è necessario qualcosa come <meta name="viewport" content="width=device-width,initial-scale=1"> per rendere 100% corrispondente alla larghezza effettiva del dispositivo.