javascript - Hvordan vise ellipsis på et readonly inputfelt i Androids standardnettleser?


Hvordan setter du et inndatafelt til å vise ellipsis hvis teksten er for lang? Inndatafeltet er skrivebeskyttet og bredden er satt til 100%.

Er dette mulig? Hvis ikke, hvordan gjør man det i JavaScript?

Merk: Selv om dette ser ut til å fungere på Chrome, fungerer det ikke på den innebygde Android-nettleseren.

Min nåværende CSS for inndataboksen:

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

Takk!

Svar #1

Avhengig av dine behov, kan du bruke CSSs text-overflow for å oppnå dette:

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/

Svar #2

Jeg tror dette svaret vil hjelpe deg

Du kan lage en klasse og bruke den på din 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;
}

For å fikse Android CSS text-overflow problemer ifølge Ben

*{
    text-rendering: optimizeLegibility;
}

Sjekk det live her http://jsfiddle.net/b4YjX/