truncation issue in firefox browser
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.
I am using following code <style> input.b { white-space: nowrap; width: 50px; overflow: hidden; text-overflow: ellipsis; border: 1px solid #000000; </style>
text-overflow: clip (default):
<input class="b">
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
All Replies (1)
Hi, when posting code that you don't want interpreted through the wikitext/markup feature here, use the < and > HTML entities:
Priyesh said
I am using following code
<!DOCTYPE html>
<html>
<head>
<style>
input.b {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
</style>
</head>
<body>
<h2>text-overflow: clip (default):</h2>
<input class="b" />
</body>
</html>
According to https://developer.mozilla.org/docs/Web/CSS/text-overflow, this property is applicable to elements with display:block. Text inputs in Firefox generally have display:inline-block by default. Try assigning display:block and see whether that resolves the issue.
You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.