HTML Input placeholder text-overflow : l'ellipse ne fonctionne pas lorsque le focus est activé (webkit uniquement)

Question

Dans les navigateurs basés sur webkit (Google Chrome et Safari), lorsque j'essaie d'afficher un texte de remplacement dans un élément d'entrée, si le texte de remplacement est trop long, je veux utiliser la fonction text-overflow: ellipsis css pour afficher "..." pour couper le texte.

Cela fonctionne au début, mais lorsque je clique sur l'élément de saisie avant de taper quoi que ce soit, l'espace réservé s'affiche toujours, mais pas l'ellipse.

Exemple : https://jsfiddle.net/cqsguwpm/1/

Notez que cela ne se produit pas dans Firefox, donc j'ai supposé que ce problème ne se produit que sur les navigateurs basés sur webkit.

Comme indiqué dans l'exemple, j'ai essayé d'ajouter text-overflow: ellipsis règle pour .input:focus::placeholder { } et .input:active::placeholder { } aussi, parce que je soupçonnais que les styles focus et active avaient écrasé la règle de l'ellipse, mais apparemment ça ne fonctionne toujours pas

J'ai besoin de savoir si cela est possible ou non dans un navigateur basé sur webkit, car je suppose que cela pourrait être l'une des lacunes de webkit.

Answer 1

Après avoir manipulé votre jsfiddle, je ne sais pas pourquoi cela se produit. Rien n'est impossible, mais après de nombreuses années de bidouillage de bugs avec CSS, je ne poursuivrais probablement pas cette affaire plus loin. Si vous avez vraiment besoin d'une ellipse, essayez ceci :

<input type="text" placeholder="it's a really long placeholder"><span></span>

.search-bar {
  overflow: hidden;
  text-overflow: ellipsis;
}
span {
  margin-left: -15px;
  background: #fff;
}
input:focus + span::after {
  content: "...";
}

Vous devrez jouer avec la taille de la police, la famille de la police et la couleur pour obtenir un résultat optimal.