3

I am trying to use text-overflow: ellipsis for my inputs but only chrome and Firefox shows it fines. On IE and opera it does not make any effect. Is there any hack..

Fiddle: http://jsfiddle.net/SZYFw/

input {
    text-overflow: ellipsis
}

<pre>
   <input type="text" value="Lorem ipsum dolor sit amet, consectetuer adipiscing elit.">​
</pre>

opera version: 12.11 Build 1661 ie version: 10

​

Community
  • 1
  • 1
karanba
  • 177
  • 2
  • 13

3 Answers3

1

I could make it work with a DIV here with all compatibilities, but, unfortunately, see what it says for input elements here...

Compatibility for Opera:

-o-text-overflow: ellipsis;

Also see this link. I think it's not supported for Opera and IE... But as you can see, the rest works perfect!

Community
  • 1
  • 1
Sonhja
  • 8,230
  • 20
  • 73
  • 131
0

By the CSS Basic UI draft, text-overflow “specifies rendering when inline content overflows its block container”. But an input element has no content; it has a value, which is displayed, but the value is not element content.

For considering a workaround, please specify the context and purpose of using ellipsis for input text. Normal implementations of input type=text automatically scroll the value horizontally if needed, and a user can be expected to see that he reaches the end of the input box.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • I use input elements to show names of items like a windows folder name and also want that user can edit, and want to show ... if the name is clipped.. – karanba Dec 14 '12 at 12:03
  • @karanba, so why would it need the ellipsis? If you think it is really needed, set up a `div` element with `contenteditable` attribute and (if the data is to be submitted as part of a form) copy its content into a hidden field when submitting the form (via `onsubmit` handler). – Jukka K. Korpela Dec 14 '12 at 15:11
  • I think there is no way out to do this with input:text fiels. I will try is to use div or span at view time and suddenly change it to text when user click on it for change.. like @Jukka K. Korpela offers – karanba Dec 18 '12 at 18:04
-1

Assuming you have no code, ellipsis doesn't work.

See if your code matches to this:

display: inline-block;
*display: inline;
*zoom: 1;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
word-wrap: normal;
max-width: 130px;
vertical-align: bottom;

Fiddle: http://jsfiddle.net/4mmQm/

This works in IE 7, IE 8, IE 9, IE 10, Firefox, Chrome

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • 8
    The question was about `input`. Your fiddle has `span`. Changed to use `input`, it does not work on IE: http://jsfiddle.net/FgyYb/ – Jukka K. Korpela Dec 14 '12 at 10:38
  • Okie. Anyways, this answer wouldn't help. Will try something. – Praveen Kumar Purushothaman Dec 14 '12 at 11:58
  • 1
    Not sure why this answer has not gotten much attention. I have been struggling for some time to make ellipsis work on IE (8&9) and was missing word-wrap: normal. All other answers/blogs on the Web give answers that don't really work on IE. I know it's late but thanks. – David Karam Dec 05 '13 at 16:08
  • 1
    @Praveen, glad to hear it, but that’s not the question. – danorton Apr 24 '14 at 18:10
  • @danorton Fine, I will correct my answer. Will you remove the downvote? – Praveen Kumar Purushothaman Apr 25 '14 at 04:31
  • 1
    The theory is that `text-overflow: ellipsis;` is what you need. However, that doesn't work for `input` elements in IE, and that's what this question is about, and that's what this answer does _not_ answer. – Cerbrus May 02 '17 at 13:46