修复我的游戏页移动端列表横向溢出并与画廊统一布局口径
- .my-game-list 改 grid-template-columns: minmax(0, 1fr),单列 auto 轨道不再被内容最小宽度撑开 - .my-game-card 加 min-width: 0 与 overflow: hidden,卡片可被压缩并裁掉溢出,与 .game-card 同口径 - .my-game-card__title 加 min-width: 0 与 overflow-wrap: anywhere,长标题不撑宽标题行 - pitfalls 记录该机制(auto 轨道最小尺寸 = 内容最小宽度 + nowrap 简介 + 缺 min-width:0)与 Chromium 夹具判据 - 里程碑文档补上该修复与 390/360 视口的测量结论
This commit is contained in:
@@ -761,10 +761,16 @@
|
||||
|
||||
.my-game-list {
|
||||
display: grid;
|
||||
/* 与画廊 .game-grid 同口径:轨道可以被压到内容最小宽度以下,否则长标题/长简介
|
||||
会把单列轨道撑到视口之外,移动端面板出现横向滚动。 */
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0.9rem;
|
||||
}
|
||||
.my-game-card {
|
||||
display: flex;
|
||||
/* 与 .game-card 同口径:卡片自身可被压缩并裁掉溢出,保证卡片永不宽于所在轨道。 */
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
border: 1px solid var(--platform-surface-border);
|
||||
@@ -793,6 +799,8 @@
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.my-game-card__title {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
|
||||
Reference in New Issue
Block a user