是否可以在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

YES

占位符的溢出省略号可以非常简单地实现：

::placeholder{
    text-overflow:ellipsis;
}

::placeholder{
    text-overflow:ellipsis;
}

input{width:100%;}

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

使用属性选择器也可以实现结果：

[placeholder]{
    text-overflow:ellipsis;
}

这也会增加操纵输入值的副作用。这可能是也可能不是。

[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

---

在Firefox和Chrome中测试并使用。

像往常一样IE不会打球！

http://jsfiddle.net/uW2cU/

---

老浏览器

• 是否需要支持旧浏览器？
• IE玩得不好？

我创建了一个小的css hack来模拟占位符。使用此代码模拟输入占位符。这有点脏，但可以提供支持 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

此范围之外的支持需要javascript。

Answer 2

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

Answer 3

要覆盖尽可能多的浏览器，请尝试以下方法：

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

Answer 4

根据specification，text-overflow仅适用于 div 和 p 等块容器标签。由于输入不是容器，因此您无法应用此CSS规则。