Menu
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!
529
To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.
text-overflow: ellipsis only works when the following is true: Parent element is not set to display: inline (span's default,) You must use display: block or display: inline-block. The element's width must be constrained in px (pixels) – it doesn't work with values specified using % (percent.)
The readonly attribute is a boolean attribute. When present, it specifies that an input field is read-only. A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
To make an ellipsis work on a table cell, you can use the CSS display property set to its "block" or "inline-block" value. In our example below, besides the display property, we set the text-overflow to "ellipsis", use the "nowrap" value of the white-space property, set the overflow to "hidden".
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/
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
