css - 是否可以在 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:150px;}

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

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

[placeholder]{
    text-overflow:ellipsis;
}

这也会增加在某些浏览器中将省略号添加到输入值的副作用。这可能是也可能不是所希望的。

[placeholder]{
    text-overflow:ellipsis;
}

input{width:150px;}

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

---

在 Firefox 和 Chrome 中测试和工作。

像往常一样，IE 不会打球！

---

老浏览器

• 需要对旧版浏览器的支持？
• 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>

超出此范围的支持将需要 javascript。

Answer 2

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

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

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

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

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

Answer 5

只是input { text-overflow: ellipsis; }没有任何占位符伪代码就可以了。