Is it possible to ellipse placeholders / watermarks in HTML5?

Question

I added these css. But I can not get the label / watermark to have an ellipsis. They really have a red font.

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 work on a mobile device, I want it to work in Safari.

Answer 1

YES

The placeholder overflow ellipsis can be achieved quite simply:

 ::placeholder{ text-overflow:ellipsis; } 

 ::placeholder{ text-overflow:ellipsis; } input{width:100%;} 

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

The result can also be achieved using the attribute selector:

 [placeholder]{ text-overflow:ellipsis; } 

This will also add the side effect of manipulating the value of the input. This may or may not be desirable.

 [placeholder]{ text-overflow:ellipsis; } input{width:100%;} 

 <input placeholder="A Long Placeholder to demonstrate"></input> <input value="A Long value to demonstrate"></input> <<< Resize to see overflow 

---

Tested and works in Firefox and Chrome.

As usual, IE will not play the ball!

http://jsfiddle.net/uW2cU/

---

START VIEWS

• Need support for older browsers?
• IE doesn't play beautifully?

I created a small css hack to simulate a placeholder. Use this code to simulate your replacement inputs. It is a bit dirty, but can offer support back in 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> <<< Resize to see overflow 

Support beyond this range will require javascript.

Answer 2

According to the specification, text-overflow is only used to lock containers such as div and p . And since the input is not containers, you cannot apply this CSS rule.

Answer 3

To reach as many browsers as possible, try the following:

 [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; }