In Firefox browser , truncation of string is not working, when typing into the input box at first time truncation is not working, but when focusing out and typing once again it start working , seems its rendering problem which is not working at first time.
Above code will give the different result in firefox and the the chrome browser.
in chrome it will work at first time , means once user will start the typing into the input box , it will start showing the ellipses once text overflow will happen.
but in Firefox it will not work like this, at first time when user will start the typing it will not show ellipses although text exceeds the boundary of input box , but when user focus out from the input box and start once again start typing into the input box ellipses will be shown. this behavior is creating confusion.
Kindly provide the solution for the same
I am using 128.5.2 esr firfox version
input.b {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
div.c {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: "----";
border: 1px solid #000000;
}<h2>text-overflow: ellipsis:</h2>
<input class="b" />