让子div占父div剩余空间，实现text-overflow: ellipsis;效果

text-overflow: ellipsis 生效需要满足核心约束条件，你的代码缺少了关键的换行控制属性，导致文本溢出但不显示省略号。以下是两种场景的修复方案：

1. 单行文本截断 #

修改 .project-card .sub 的CSS，添加 white-space: nowrap 强制文本不换行：

.project-card .sub {
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    white-space: nowrap; /* 强制文本单行显示 */
}

2. 多行文本截断（示例为最多2行） #

如果需要多行截断，使用WebKit私有属性控制行数：

.project-card .sub {
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 设定最多显示的行数 */
    -webkit-box-orient: vertical;
}

问题原因说明 #

默认状态下文本会自动换行，text-overflow: ellipsis 仅在文本无法换行且溢出容器时触发，因此必须通过 white-space: nowrap（单行场景）或WebKit多行属性（多行场景）限制文本换行行为，同时配合 overflow: hidden 才能生效。

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