How to show ellipsis on a readonly input field in Android stock browser?

Question

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

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

Note: While this seems to work on Chrome, it does not work on the Android stock browser.

My current css for the input field:

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

Thanks!

possible duplicate of [Insert ellipsis (...) into HTML tag if content too wide](http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide) — Jukka K. Korpela, Aug 05 '13 at 08:33
@JukkaK.Korpela: The above link is regarding a generic html tag. My question is specific to the input field. I was able to display ellipsis on the html tags but not on an input field. Thanks! — Arci, Aug 05 '13 at 08:37
If you have a specific question about a special case, it should be presented that way (preferably with a reference to the general case). From the comments, it seems that you are having problems with a particular browser. Due clarifications should be made into the text and possibly title of the *question*, not just in comments. — Jukka K. Korpela, Aug 05 '13 at 08:48
@JukkaK.Korpela: Thanks for the advice! I already updated my title. — Arci, Aug 05 '13 at 08:57

score 5 · Answer 1 · answered Aug 05 '13 at 08:31

5

Depending on your requirements, you can use CSS's 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/

answered Aug 05 '13 at 08:31

Prisoner

27,391
11
73
102

Hi! Thanks for your comment! I also text-overflow with width but it still does not show the ellipsis on the Android stock browser. – Arci Aug 05 '13 at 08:40

score 1 · Answer 2 · edited May 23 '17 at 11:43

1

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 the Android CSS text-overflow issues according to Ben

*{
    text-rendering: optimizeLegibility;
}

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

edited May 23 '17 at 11:43

Community

1
1

answered Aug 05 '13 at 08:30

zzlalani

22,960
16
44
73

Thanks for your answer but this does not work on the Android browser. My current code is the same with yours minus the `-o-text-overflow`. While it works on Chrome, it does not work on the Android stock browser. – Arci Aug 05 '13 at 08:39
@Arci: can you have a look at this? http://www.chilisapps.com/blog/2013/04/18/css-text-overflow-issues-on-android/ – zzlalani Aug 05 '13 at 08:41
Thanks for the link! However, it does not solve my problem. I also tried the `optimizeLegibility` property but the input field still does not show ellipsis. – Arci Aug 05 '13 at 08:56

score 0 · Answer 3 · answered Aug 05 '13 at 09:01

0

The following code has been tested and it works,I hope that will help !

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

answered Aug 05 '13 at 09:01

Daniel Peng

1
1

Thanks, Daniel! But your answer is the same as the other commenters. However, this does not work on Android stock browser. – Arci Aug 05 '13 at 09:04

score 0 · Answer 4 · answered Aug 05 '13 at 10:26

This appears to be a limitation/bug in the Android browser: it seems to fail to implement text-overflow: ellipsis on any input element.

For example, instead of <input name=foo value="some long string here" width=100%>, you could 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">

For a readonly field, there is a simple workaround: duplicate the data, first in (say) div element, on which you set text-overflow: ellipsis, and then in a hidden field. You may wish to style the first element to look like a readonly field, but keeping it as normal text would make it even clearer to the user that this data cannot be edited using normal means.

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

How to show ellipsis on a readonly input field in Android stock browser?

4 Answers4