Is it possible to ellipsize placeholders/watermarks in HTML5?

css, html, mobile-safari

Solution

Using the `:placeholder-shown` selector works well and will ensure any text input doesn't get hidden. Compatibility is pretty solid too.

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

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

Problem

I added these css. But I can't get the placeholders/watermarks to have ellipsis. They do have the red font though. ``` 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; } ``` Since I am working for mobile, I want it to work in Safari.

Original source