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.

Backwater

Your CSS works for me in Chrome/Firefox (Windows). It doesn't work in Safari. jsfiddle.net/thirtydot/Gx5nX – Translucent

It depends on the Safari Version, unfortunately... I think that placeholder styling is not fully supported for now... – Aridatha

As @Aridatha said, it depends on the version. Because of this, you can have default text and class, and use JS to remove the text and class when the user input something. – Shulamith

Why don't you accomplish this in JavaScript? Yes, more messy but definitely for cross-browser.. – Sedition

Answer 1

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>

Phenothiazine

Welcome to Stack Overflow. Snippets should be used when running them demonstrates something, this does not have any example HTML to work on. Code only answers can almost always be improved by adding explanation. Answers to older questions with existing answers should explain what new aspect of the question they address. – Engrave

@JasonAller If you read closely, it is actually a new suggestion, and the only one that actually works for my use-case. – Gomulka

This is the only answer which I found to be working on Chrome 91. The current top answer fails to set overflow ellipses for either code example. – Farlee

Answer 2

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.

Dosi

This is not working in IE. Is there any other styles to be set for this to work in IE to show ellipses for placeholder. – Wurtz

@AshokGurram Have you tried the additional prefixes added to my answer? – Dosi

I have tried above all prefixes. None of them worked in ie. – Wurtz

@AshokGurram Apologies for that. Ellipsis isn't supported on inputs within older versions of IE. It will need a little hack or javascript to make it work. I hate to let IE beat me so I made the code i've added to my answer. I hope it helps. – Dosi

thanks getting confirmation and updating your answer. – Wurtz

CAREFUL with [placeholder] you are formatting the input itself not the placeholder. Please correct your answer! jsfiddle.net/uW2cU/98 – Freeman

@Freeman thanks for the input. I have updated my answer to reflect your comments. – Dosi

Not working on Chrome v. 100, MS Edge v. 100, and Safari v. 15.2. – Gomar

@MarcioDuarte It seems ::placeholder no longer works but [placeholder] still seems fine. I will edit my answer. – Dosi

Answer 3

To cover as many browsers as possible, try these:

[placeholder]{
    text-overflow:ellipsis;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    text-overflow:ellipsis;
}
::-moz-placeholder { /* Firefox 19+ */
    text-overflow:ellipsis;
}
:-ms-input-placeholder { /* IE 10+ */
    text-overflow:ellipsis;
}
:-moz-placeholder { /* Firefox 18- */
    text-overflow:ellipsis;
}

Creswell

Please add !mportant in chrome because by default placeholder has text-overflow: clip; <div pseudo="-webkit-input-placeholder" id="placeholder" style="text-overflow: clip; display: block !important;">Enter text...</div> – Housum

Answer 4

Just input { text-overflow: ellipsis; } without any placeholder pseudos did the trick.

Moltke

This should be the correct answer in 2022. – Gomar

this will never work for placeholder overflow. – Indenture

Answer 5

According to the specification, text-overflow applies only to block containers like div and p tags. And since inputs are not containers, you cannot apply this CSS rule.

Dare

Placeholder is div in chrome. <div pseudo="-webkit-input-placeholder" id="placeholder" style="text-overflow: clip; display: block !important;">Enter text...</div> – Housum