Primeng FloatLabel溢出管理：输入框未聚焦显省略号，聚焦显完整文本

问题拆解 #

你需要实现：输入框未聚焦时文本溢出显示省略号，聚焦/有内容时显示完整文本，但直接加overflow-x: hidden会把浮动标签裁掉，PrimeFlex相关类也没达到预期效果。

具体解决步骤 #

• 精准控制输入框的溢出状态：只针对未聚焦、未激活且无内容的输入框设置溢出省略，避免影响浮动标签。添加如下CSS：

/* 未聚焦/无内容时，文本溢出显示省略号 */
.p-float-label input:not(:focus):not(:active):not(.p-filled) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

• 聚焦/有内容时重置样式：让输入框能完整展示文本，同时不影响浮动标签：

/* 聚焦/有内容时，显示完整文本 */
.p-float-label input:focus,
.p-float-label input.p-filled {
  overflow: visible;
  white-space: normal;
}

• 容器宽度适配：给输入框设置100%宽度，确保容器本身不要加overflow-x: hidden，让浮动标签能在容器上方正常显示：

.p-float-label input {
  width: 100%;
  box-sizing: border-box;
}

原理说明 #

PrimeNG的FloatLabel浮动标签挂载在输入框的外层容器中，但不属于输入框元素内部。之前的问题是把溢出隐藏加在了容器上，导致浮动标签被裁剪。现在只给输入框元素单独设置溢出样式，聚焦时重置，既实现了文本溢出控制，又不会影响浮动标签的正常显示。

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