Repository navigation
[Bug Report]table组件在定义 #411
Description
Environment
IOS和安卓/chrome浏览器(最新)/vue2
Reproduction link
Steps to reproduce
table的columns属性。在定义某一列宽度属性为minWidth:150时。在iOS手机的chrome浏览器上内容会被显示全。
而在安卓手机的chrome浏览器上，这个内容就会被截取以...结尾，显示不全。
What is expected?
我期望的是两个端可以显示一样。不可能我所有的table都要去判断安卓还是ios再去定义宽度
What is actually happening?
安卓的table内容会被截取
1
Activity
dosubot commentedon May 9, 2025
Hello @Siqilucky! I'm here to help you with bugs, answer questions, and assist with contributions while you wait for a human maintainer. Let's tackle that issue together!
The issue you're experiencing with the table component, where content is fully displayed on iOS but truncated with ellipsis on Android, might be related to how different platforms handle CSS properties like
overflow,text-overflow, andwhite-space. These properties can behave differently across platforms, leading to inconsistencies in text overflow handling [1].To address this, you can try the following:
Check CSS Properties: Ensure that the CSS properties
overflow: hidden;,text-overflow: ellipsis;, andwhite-space: nowrap;are consistently applied across all platforms. These properties are crucial for managing text overflow and might need adjustments to achieve consistent behavior.Use the
ellipsisProperty: If not already used, enable theellipsisproperty in your table column configuration. This ensures that text is truncated with an ellipsis when it overflows, and it should be consistent across platforms [2].Tooltip for Full Content: Consider enabling the
tooltipoption for columns where content is truncated. This will allow users to see the full content on hover or tap, providing a consistent user experience across devices [2].These steps should help in achieving more consistent rendering across iOS and Android devices.
To reply, just mention @dosu.
Share context across your team and agents. Try Dosu.