css - 是否可以在 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 中工作。

Answer 1

使用 :placeholder-shown 选择器效果很好，可以确保任何文本输入不会被隐藏。 Compatibility is pretty solid too .

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

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