CSS中text-overflow: ellipsis属性设置后不生效问题求助

text-overflow: ellipsis 无法单独触发省略号效果，必须同时满足3个前置配置，你当前的CSS代码缺少另外两项必填配置。

单行文本溢出省略修复方案 #

需要补充的两个必填属性如下：

• overflow: hidden：隐藏超出容器边界的内容
• white-space: nowrap：强制文本在单行展示，不自动换行

修改后的完整CSS代码如下：

.one{  
  background: rgba(238, 238, 238, 0.616);
  padding: 10px;
  width: 610px;
  height: 70px;
  float: left;
  position: relative;
  text-overflow: ellipsis;
  /* 新增必填属性 */
  overflow: hidden;
  white-space: nowrap;
}

关于hover、::before、::after的影响说明 #

正常情况下这三类样式不会影响省略号效果生效，仅以下特殊场景会导致失效：

• ::before设置了非空内容，挤占了文本展示空间导致文本直接超出容器
• hover状态下修改了容器的width、overflow、white-space属性
• ::after设置了非空内容且未做定位偏移，占用了文本展示区域

如果补充必填属性后仍未生效，可以优先排查以上场景。

多行文本溢出省略方案 #

如果你需要实现多行文本超出后展示省略号，可改用WebKit内核兼容方案，示例代码如下：

.one{  
  background: rgba(238, 238, 238, 0.616);
  padding: 10px;
  width: 610px;
  float: left;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 多行省略核心配置 */
  display: -webkit-box;
  /* 数字为限制展示的行数，可自行调整 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

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