Jelly Ama Jelly Ama - 10 days ago 5
CSS Question

How to use text-overflow ellipsis in an html input field?

My web page has input fields to which I have applied the following css :

.ellip {
white-space: nowrap;
width: 200px;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}


But this doesn't seem to have any effect.
Am I missing something obvious here or is it not possible to have an ellipsis in an input field using CSS only ?

Answer

A field is an element with its own rules. The input field is implemented in the way that if the text gets longer than the field, the text gets just unseen.

The reason for this is, if you use the field in a form and it would be possible to use text-overflow ellipsis, then it would only transmit the truncated content, what is not the wanted effect.

Comments