How does HTML determine if the text is overflowing (that is, an ellipsis appears)?

as the title, I have also looked for this question on SO, but that question is too old, and the most liked answer is no longer valid. question is here

.

to this question, many people"s answer is to determine whether ScrollWidth is greater than OuterWidth, but sometimes there are ellipses when the two values are equal, as shown in the following figure

UILayui:

.
Apr.09,2021
Another answer on

stackoverflow is https://stackoverflow.com/que., which probably means to make a copy of the element but not show it (visibility:hidden). Compare the width of the element itself with the width of the copy. If the width of the copy is greater than the element itself, it overflows


.

this technical problem is really tricky
I want to provide another way of thinking
from a product and interaction point of view

Why is there a text overflow?

Is

allowed?

Why is text overflow not allowed?

if it is not allowed, can we use another interaction to avoid this problem


also encountered this problem, which is not normal under Firefox, Google or 360 speed mode is normal, is there a solution

Menu