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

是

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

::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

使用:placeholder-shown选择器效果很好，可以确保任何文本输入都不会被隐藏。 兼容性也很扎实。

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

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

Answer 3

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