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!

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!

• javascript
• html
• css

• 3 possible duplicate of Insert ellipsis (...) into HTML tag if content too wide – Jukka K. Korpela Commented Aug 5, 2013 at 8:33
• 1 @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 Commented Aug 5, 2013 at 8:37
• 1 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 ments, 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 ments. – Jukka K. Korpela Commented Aug 5, 2013 at 8:48
• @JukkaK.Korpela: Thanks for the advice! I already updated my title. – Arci Commented Aug 5, 2013 at 8:57

4 Answers 4

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/yrPc8/

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/b4YjX/

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

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

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.