搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

truncation issue in firefox browser

more options

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

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 <!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> 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

所有回覆 (1)

more options

Hi, when posting code that you don't want interpreted through the wikitext/markup feature here, use the &lt; and &gt; 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.

有幫助嗎?

問個問題

如果您還沒有帳號,您必須先登入帳號 來回覆文章。還沒有帳號的話,只能發問新問題