CSS如何实现非固定百分比宽度下文本超出长度显示省略号

解决方案 #

1. 修复表格布局配置 #

首先删除你给<tr>标签添加的style="display : block;"属性，该属性会破坏表格原生的行列布局规则，是导致td无法同行展示的核心原因。

然后给目标表格添加以下样式，保证百分比宽度规则生效：

#crl-table-2 {
  width: 100%; /* 使表格占满父容器宽度，跟随窗口大小自适应缩放 */
  table-layout: fixed; /* 强制表格列宽按照你预设的col百分比计算，不受单元格内容长度撑开 */
}

2. 无需额外添加display:block属性 #

td元素默认的display: table-cell属性完全支持文本溢出省略效果，只要父级表格的宽度规则生效，你现有的one-line-text样式就可以正常工作，不需要调整：

.one-line-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

修改完成后，四列会固定各占25%宽度，单元格内容超出长度时自动显示省略号，同时表格整体宽度会随浏览器窗口缩放自适应适配。

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