仅使用CSS能否实现HTML表格列内容溢出时自动裁剪为三点省略号？

解决方案 #

仅通过CSS即可实现该需求，只需调整以下几处CSS规则即可：

/* 1. 移除容器的水平滚动设置，不需要滚动条 */
.table-responsive {
    display: block;
    width: 100%;
}

/* 2. 保证前3列宽度刚好匹配内容，不会被压缩 */
.table-thin table td:not(:last-child), .table-thin table th:not(:last-child) {
    width: 0;
    white-space: nowrap; /* 新增这行，避免前3列内容折行，宽度完全适配内容 */
}

/* 3. 最后一列占用剩余空间，溢出时自动截断显示省略号 */
.table-thin table td:last-child, .table-thin table th:last-child {
    width: 100%; /* 让最后一列占满剩余所有可用宽度 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

其余原有CSS规则可保持不变，调整后即可实现预期效果：前3列宽度始终适配内部文本长度，最后一列自动填充剩余空间，内容溢出时自动截断显示省略号，不会出现水平滚动条，且可适配所有屏幕宽度。

内容的提问来源于stack exchange，提问作者Timuçin Çiçek