Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Tìm hiểu thêm

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

Tất cả các câu trả lời (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.

Hữu ích?

Đặt một câu hỏi

Bạn phải đăng nhập vào tài khoản của bạn để trả lời bài viết. Vui lòng bắt đầu một câu hỏi mới, nếu bạn chưa có tài khoản.