如何修复grid网格图库中figcaption的字符显示限制问题

• 核心问题出在Grid布局的默认特性上：你作为.items直接子项的<figure>元素没有设置最小宽度限制，Grid布局中子项的默认min-width值为auto，会优先适配内容宽度，就算你给网格列设了1fr的比例，子项也会被过长的figcaption内容撑开宽度，导致内部figcaption的溢出截断规则无法触发。
• 次要问题：你给figcaption.name加了左右内边距，但没设置box-sizing: border-box，内边距会额外撑宽元素，就算父级宽度正常也可能导致溢出规则不生效。

不需要。figure是符合语义的标签，替换为div没有任何额外收益，只需要补充CSS规则即可解决问题。

修改后的CSS代码如下：

.items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 40px 20px;
}
/* 新增规则：限制Grid子项的最小宽度 */
.items > figure {
    min-width: 0;
}

figcaption.name {
    padding: 8px 15px;
    text-align: center;
    background: #EEE;
    color: #444;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /* 新增规则：确保内边距不会撑宽元素 */
    box-sizing: border-box;
    width: 100%;
}
figcaption.year {
    background: #EEE;
    color: #444;
    font-weight: 100;
    text-align:left;
}


@media only screen and (max-width: 1000px){.items {grid-template-columns: repeat(5, 1fr);}}
@media only screen and (max-width: 800px) {.items {grid-template-columns: repeat(4, 1fr);}}
@media only screen and (max-width: 600px) {.items {grid-template-columns: repeat(3, 1fr);}}
@media only screen and (max-width: 400px) {.items {grid-template-columns: repeat(2, 1fr);}}

如果后续需要做多行文本溢出省略，把单行的white-space: nowrap删掉，替换为对应多行规则即可，不需要调整结构。

内容的提问来源于stack exchange，提问作者user9171