Text-Überlauf: Ellipse funktioniert nicht in Firefox und IE

Question

Ellipsis funktioniert nicht in Firefox und IE, wenn 100% zum Eingabefeld gegeben wurde, kann Kann mir helfen, dies heraus. Hier ist mein Beispielcode.

Hinweis: Ich kann die Breite und die maximale Breite des Eingabefeldes nicht fest codieren. Es sollte seine gesamte innere Breite einnehmen.

.mainDiv { 
 
    width: 500px; 
 
    height: 200px; 
 
} 
 
.innerDiv { 
 
    width: 50%; 
 
} 
 
.inputField { 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="mainDiv"> 
 
    <div class="innerDiv"> 
 
    <input class="inputField" type="text" /> 
 
    </div> 
 
</div>

Answer 1

Ich bin nicht wirklich sicher, was Sie versuchen, mich zu tun, aber für, macht dies die Auslassungspunkte richtig auf Firefox:

See this fiddle 

https://jsfiddle.net/ftu550jq/

Wie rendest du das?

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow