Comment utiliser le troncage de texte ellipsis dans un champ de saisie html?

Question

Ma page web comporte des champs de saisie auxquels j'ai appliqué le CSS suivant :

.ellip {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

Mais cela ne semble pas avoir d'effet. Est-ce que je manque quelque chose d'évident ici ou est-il impossible d'avoir une ellipse dans un champ de saisie en utilisant seulement du CSS?

Answer 1

Définir text-overflow:ellipsis sur l'élément lui-même a fonctionné pour moi. Il tronque le texte et place les points de suspension lorsque l'élément n'est pas en focus.

Answer 2

Je sais que c'est une vieille question, mais j'avais le même problème et j'ai trouvé cet article de blog de Front End Tricks And Magic qui a fonctionné pour moi, donc j'ai pensé que je partagerais au cas où des gens seraient toujours curieux. L'idée principale du blog est que vous POUVEZ faire un ellipsis dans un input dans IE également, mais seulement si l'input a un attribut readonly.

De toute évidence, dans de nombreux scénarios, nous ne voulons pas que notre input ait un attribut readonly. Dans ce cas, vous pouvez utiliser JavaScript pour le basculer. Ce code est directement issu du blog, donc si vous trouvez cette réponse utile, vous pourriez envisager de consulter le blog et de laisser un commentaire d'appréciation à l'auteur.

// rendre l'input editable
$('.long-value-input').on('click', function() {
  $(this).prop('readonly', '');
  $(this).focus();
})

// rendre l'input readonly
$('.long-value-input').on('blur', function() {
  $(this).prop('readonly', 'readonly');
});

.long-value-input {
  width: 200px;
  height: 30px;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

Answer 3

De mes tests, Chrome, Safari et Firefox le prennent désormais en charge.

Cependant, ils n'ont pas tout à fait les mêmes effets.

Sur Firefox, lorsqu'on quitte le champ de texte, des points de suspension sont ajoutés à droite du texte, mais seulement s'il y a du texte caché par le côté droit de la zone de texte.

Alors que sur Chrome, lorsqu'on quitte le champ de texte, le curseur semble se déplacer au début du texte et ajoute les points de suspension à la fin, peu importe où vous avez laissé la position de défilement du texte.

Answer 4

Un champ est un élément avec ses propres règles. Le champ de saisie est implémenté de telle manière que si le texte est plus long que le champ, le texte devient juste invisible.

La raison de cela est que si vous utilisez le champ dans un formulaire et qu'il serait possible d'utiliser une ellipse de débordement de texte, alors il ne transmettrait que le contenu tronqué, ce qui n'est pas l'effet voulu.