如何用CSS和HTML正确为input设置text-overflow ellipsis并修复空输入显省略号问题

问题原因 #

你将text-overflow、overflow、white-space这些控制省略号的属性写在了外层.wrapper容器上，而非input元素本身，容器不会感知input的内容是否为空，所以会始终渲染省略号效果。

修复方案 #

推荐直接把省略号控制逻辑加在input元素上，input作为替换元素，自身的text-overflow属性会自动根据内容长度判断是否展示省略号，内容为空时默认不会显示：

.wrapper {
    min-width: 0px;
    max-width: 100%;
    padding: 14px 16px;
    line-height: 21px;
    position: relative;
    max-height: 49px;
}

.input {
    display: inline-block;
    line-height: 1.5;
    padding: 5px 7px 4px;
    min-height: 20px;
    margin: 0px;
    /* 新增省略号相关配置 */
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

HTML结构不需要做修改。

如果有特殊场景必须把省略号属性加在父容器上，可以用:has伪类做状态判断，仅当input有内容时才启用省略号效果（现代浏览器支持）：

/* 父容器默认不加省略号属性 */
.wrapper {
    min-width: 0px;
    max-width: 100%;
    padding: 14px 16px;
    line-height: 21px;
    position: relative;
    max-height: 49px;
}
/* 仅input非空时给父容器加省略号属性 */
.wrapper:has(.input:not(:placeholder-shown)) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.input {
    display: inline-block;
    line-height: 1.5;
    padding: 5px 7px 4px;
    min-height: 20px;
    margin: 0px;
}

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