-
-
Notifications
You must be signed in to change notification settings - Fork 50.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: List.Item.Meta width overflow #24992
Conversation
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 82a6204:
|
Codecov Report
@@ Coverage Diff @@
## master #24992 +/- ##
=======================================
Coverage 99.37% 99.37%
=======================================
Files 365 365
Lines 7303 7303
Branches 2042 2041 -1
=======================================
Hits 7257 7257
Misses 46 46 Continue to review full report at Codecov.
|
components/list/style/index.less
Outdated
|
||
&-avatar { | ||
margin-right: @list-item-meta-avatar-margin-right; | ||
} | ||
&-content { | ||
flex: 1 0; | ||
overflow: hidden; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里也用 max-width
,overflow: hidden
会 break 掉用户自定义出框的样式
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里用 max-width 会和有 avatar 的情况冲突,视觉宽度变成 avatar + 100%,还是会溢出
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
看取舍吧,我感觉行为上难两全。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
试试:
--- overflow: hidden;
+++ width: 0;
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
厉害,这个方法好
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
如果用户强行塞一个很 width 写死很宽的东西那也没办法,flex-item 如果不设定 overflow: hidden 还是一定会被撑开。但是那种情况比较特殊,我觉得这样差不多够用,因为 list-item 一般放的还是文字,文字是可以 flex 到比较窄的,可以覆盖大多数情况
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
那那种情况就让他们自己调吧
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
fix #24969
💡 Background and solution
Set max-width on wrapper & overflow hidden on flex-item
📝 Changelog
☑️ Self Check before Merge