Reproduction link
Steps to reproduce
Utilize the Typography Title component, incorporating an ellipsis property with an onEllipsis callback. Note that the standard three dots used for text overflow may persist even when the typography has sufficient space.
What is expected?
The Typography component should not display ellipsis if it has sufficient space.
What is actually happening?
The Typography component consistently displays ellipsis.
| Environment | Info |
| ------------ | ------------ |
| antd | 5.19.3 |
| React | react |
| System | Microsoft Windows 10 Pro |
| Browser | Chrome v126.0.6478.127 |
7条答案
按热度按时间dba5bblo1#
I can reproduce this issue on Windows 10 with all the major browsers using the provided example:
I used two different notebooks which have nothing to do with each other (one was the company one, and the other one a private one). The same result for all mentioned browsers.
This is captured with Google Chrome
However, I can not reproduce it on my private Linux based notebook with Firefox. There it works the same as shown by @afc163.
uhry853o2#
It's weird. I don't own a Windows notebook though, could you help to find what's wrong here and send a PR?
von4xj4u3#
@afc163 I'll can try. I know, that it exists since release 5.15.0 and I expect because of these changes: #47597
However, it was a somewhat major refactoring that I still need to take a closer look at and understand.
hs1rzwqc4#
@afc163 I have found out what the problem is, but I don't know how to solve it properly. So here is some information about what I have found out so far.
The difference between Windows and Linux that causes the problem here is different fonts that are used. Therefore, the StackBlitz example has been updated to use only the ‘Open Sans’ font in order to reproduce it on both Windows and Linux.
This is the line that causes the issue in Ellipsis.tsx:
ant-design/components/typography/Base/Ellipsis.tsx
Line 22 in 43dca48
| | returnspan.scrollHeight>span.clientHeight; |
For several fonts scrollHeight is always between 1px up to about 6px higher than clientHeight. So this resolves to true and therefore the ellipsis is visible all the time.
I also found this StackOverflow post discussing the behaviour I have detected: https://stackoverflow.com/questions/52815758/why-are-an-elements-scrollheight-and-clientheight-not-the-same-for-some-fonts
Of course, you could subtract a safety value from scrollHeight to compensate for this. But I don't know whether this is a good solution.
And that's all I've been able to find out so far. Any ideas?
epfja78i5#
Start a new pull request in StackBlitz Codeflow .
ny6fqffe6#
I can't reproduce it, it works well in my machine：
jrcvhitl7#
Hello @befink. Please provide a online reproduction by forking this one or provide a minimal GitHub repository like create-react-app-antd . Issues labeled by
Need Reproducewill be closed if no activities in 3 days.你好 @befink，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过 fork 这个 在线重现案例 ，或者提供一个最小化的 GitHub 仓库（类似 create-react-app-antd ）。3 天内未跟进此 issue 将会被自动关闭。
什么是最小化重现，为什么这是必需的？