Is it possible to ellipsize placeholders/watermarks in HTML5?

Question

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.

Answer 1

YES

---

Method 1

Still supported on all browsers.

Overflow ellipsis of a placeholder can be achieved using the attribute selector:

[placeholder]{
    text-overflow:ellipsis;
}

This will also have added the side effect of adding ellipsis to the inputs value in some browsers. This may or may not be desired.

[placeholder]{
    text-overflow:ellipsis;
}

input{width:150px;}

<input placeholder="A long placeholder to demonstrate"></input>
<input value="A long value to demonstrate"></input>

---

Method 2

No longer supported.

As of Chrome and Edge V100+ the ::placeholder pseudo element selector does not support the text-overflow property.

::placeholder{
    text-overflow:ellipsis;
}

::placeholder{
    text-overflow:ellipsis;
}

input{width:150px;}

<input placeholder="A long placeholder to demonstrate"></input>

---

WHY?

It seems like a tightening of the conformation to the specification:

Only the subset of CSS properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.

• All font-related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family.
• All background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode.
• The color property
• word-spacing, letter-spacing, text-decoration, text-transform, and line-height.
• text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.

---

OLDER BROWSERS

• Need support for older browsers?
• IE not playing nicely?

I created a little css hack to simulate a placeholder. Use this code to simulate your inputs placeholder. It's a little dirty but can offer support as far back as IE6.

.ellipsis{
  box-sizing:border-box;
  position:relative;
  padding:0 5px;
  background:#fff;
  color:rgba(0,0,0,0.5);
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ellipsis input{
  box-sizing:border-box;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  display:block;
  background:none;
  border:1px solid #ddd;
  color:#000;
  padding:0 5px;
}
.ellipsis input:focus{
  background:#fff;
}

<div class="ellipsis">
  A Long Placeholder to demonstrate A Long Placeholder to demonstrate A Long Placeholder to demonstrate
  <input></input>
</div>

Support outside of this range would require javascript.

Answer 2

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>