是否可以在 HTML5 中省略占位符/水印？

Question

我添加了这些CSS。但我无法让占位符/水印带有省略号。他们确实有红色字体。

 input::-webkit-input-placeholder {
    color:    red !important;
    max-width:  95% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

input:-moz-placeholder {
    color:    red !important;
    max-width:  95% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

因为我在为移动设备工作，所以我希望它在 Safari 中工作。

原文由 unj2 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 :placeholder-shown 选择器效果很好，可以确保任何文本输入不会被隐藏。 兼容性也非常可靠。

 input:placeholder-shown {
  text-overflow: ellipsis;
}

 <input placeholder="A Long Placeholder to demonstrate"></input>

原文由 Manjunath Hadimani 发布，翻译遵循 CC BY-SA 4.0 许可协议