子元素宽于父元素时如何让text-overflow: ellipsis提前显示省略号

解决方案 #

你可以通过保留子元素原有width属性的同时添加max-width限制，补全text-overflow的生效前提来实现需求，不需要修改原有width值：

核心实现逻辑

• 给input添加max-width: 100%：该属性只会限制元素实际渲染的最大宽度不超过父容器，你原本设置的width: 100px属性会完整保留，不会影响依赖该宽度的min-content相关规则
• 补全text-overflow: ellipsis的必备生效属性：需要同时给input设置overflow: hidden和white-space: nowrap，省略号逻辑是针对元素自身内容溢出触发的，父元素的溢出裁剪无法触发子元素的省略号效果

修改后的完整CSS代码

input {
  border: 1px solid black;
  text-overflow: ellipsis;
  width: 100px;
  /* 新增以下3行 */
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

div {
  border: 1px dotted black;
  width: 80px;
  overflow: clip;
}

/* 兼容Safari的overflow: clip效果 */
div > input {
  clip-path: polygon(0 0, 80px 0, 80px 100%, 0 100%);
}

HTML代码无需修改，调整后即可实现子元素文本溢出父容器时显示省略号的需求，同时不会影响原有依赖input宽度的规则。

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