How to show ellipsis in read-only input field in android browser?

Question

How do you set the input field to display the ellipsis if the text is too long? The input field is read-only and its width is set to 100%.

Is it possible? If not, how do you do it in JavaScript?

Note. Although this seems to work in Chrome, it does not work in the Android browser.

My current css for input field:

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

Thanks!

Answer 1

Depending on your requirements, you can use CSS text-overflow to achieve this:

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 2

I think this answer will help you.

You can create a class and apply it on your 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; } 

To fix CSS text overflow problems according to Ben

 *{ text-rendering: optimizeLegibility; } 

Check it out here http://jsfiddle.net/b4YjX/

Answer 3

The following code has been tested and it works, I hope this helps!

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

Answer 4

This is apparently a limitation / error in the Android browser: it seems that it does not implement text-overflow: ellipsis for any input element.

For example, instead of <input name=foo value="some long string here" width=100%> you can use

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

There is a simple way for the readonly field: duplicate the data, first in the div element (for example), on which you set text-overflow: ellipsis , and then in the hidden field. You might want the first element to look like a readonly field, but saving it as plain text would make it even more clear to the user that this data could not be edited by conventional means.

As usual, with small devices you usually need something like <meta name="viewport" content="width=device-width,initial-scale=1"> to make 100% match the actual width of the device.