¿Es posible elipse de marcadores de posición/marcas de agua en HTML5?

Question 1

Agregué estos css. Pero no puedo hacer que los marcadores de posición/marcas de agua tengan puntos suspensivos. Sin embargo, tienen la fuente roja.

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

Como estoy trabajando para dispositivos móviles, quiero que funcione en Safari.

Question 2

Utilizando el :placeholder-shown selector funciona bien y garantizará que ninguna entrada de texto se oculte. La compatibilidad también es bastante sólida..

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

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

Question 3

SÍ

Método 1

Todavía es compatible con todos los navegadores.

Los puntos suspensivos de desbordamiento de un marcador de posición se pueden lograr usando el selector de atributo:

[placeholder]{
    text-overflow:ellipsis;
}

Esto también habrá agregado el efecto secundario de agregar puntos suspensivos al valor de entrada en algunos navegadores. Esto puede o no ser deseado.

[placeholder]{
    text-overflow:ellipsis;
}

input{width:150px;}

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

Método 2

Ya no es compatible.

A partir de Chrome y Edge V100+, el ::placeholder selector de pseudo elementos no soporta la propiedad de desbordamiento de texto.

::placeholder{
    text-overflow:ellipsis;
}

::placeholder{
    text-overflow:ellipsis;
}

input{width:150px;}

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

¿POR QUÉ?

Parece un ajuste de la conformación a la especificación:

Solo el subconjunto de propiedades CSS que se aplican al ::first-line el pseudo-elemento se puede usar en una regla usando ::placeholder en su selector.

Todas las propiedades relacionadas con la fuente: 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-stretchy font-family.
Todas las propiedades relacionadas con el fondo: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachmenty background-blend-mode.
El color propiedad
word-spacing, letter-spacing, text-decoration, text-transformy line-height.
text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-styley vertical-align.

NAVEGADORES ANTIGUOS

¿Necesita soporte para navegadores más antiguos?
¿Es decir, no está jugando bien?

Creé un pequeño truco CSS para simular un marcador de posición. Utilice este código para simular el marcador de posición de sus entradas. Está un poco sucio pero puede ofrecer soporte desde 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>

El soporte fuera de este rango requeriría javascript.

Question 4

Para cubrir tantos navegadores como sea posible, pruebe estos:

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

Question 5

De acuerdo con la especificación, text-overflow se aplica solo a contenedores de bloque como división y pag etiquetas Y dado que las entradas no son contenedores, no puede aplicar esta regla CSS.

Question 6

Justo input { text-overflow: ellipsis; } sin ningún marcador de posición, los pseudos hicieron el truco.

SÍ

Método 1

Método 2

NAVEGADORES ANTIGUOS

¿Ha sido útil esta solución?