1

Ellipsis is not working in Firefox and IE, when was giving 100% to the input field, Can Anyone help me out this. Here is my sample code.

Note: I can't hard code the width and max-width of input field.It should occupy it's innerDiv complete width.

.mainDiv {
  width: 500px;
  height: 200px;
}
.innerDiv {
  width: 50%;
}
.inputField {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="mainDiv">
  <div class="innerDiv">
    <input class="inputField" type="text" />
  </div>
</div>
Vucko
  • 20,555
  • 10
  • 56
  • 107
Srinivas Sree
  • 121
  • 1
  • 2
  • 7
  • What version of browser did you test it against? – Bálint Jul 10 '16 at 14:56
  • Hi Balint, IE 10 and firefox 47 – Srinivas Sree Jul 10 '16 at 15:02
  • It works on Firefox. Also see [How to use text-overflow ellipsis in an html input field?](http://stackoverflow.com/q/9771795/1529630) – Oriol Jul 10 '16 at 15:10
  • @dippas How is this a duplicate of 'How to use text-overflow ellipsis in an html input field?' Read it more clearly. I'm having issues getting and ellipsis using 100% width in Firefox too. Your "Duplicate" does not answer his question. – user3796133 May 31 '18 at 01:33

1 Answers1

0

I'm not really sure what you're trying to do but for me, this renders the ellipsis properly on firefox :

See this fiddle

https://jsfiddle.net/ftu550jq/

How do you renders that ?

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

Cephou
  • 257
  • 5
  • 23
  • Don't give the value by default..Enter the value into the filed then it's not working for the first time, after editing it multiple times then it working .. Can You please check this case. Thanks in Advance. – Srinivas Sree Jul 10 '16 at 15:31