web-dev-qa-db-fra.com

Comment utiliser les ellipses de débordement de texte dans un champ de saisie html?

Ma page Web contient 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 avoir aucun effet. Suis-je en train de manquer quelque chose d'évident ici ou n'est-il pas possible d'avoir des points de suspension dans un champ de saisie en utilisant uniquement CSS?

htmlcssellipsis
47
Jelly Ama

Je sais que c'est une vieille question, mais j'avais le même problème et je suis tombé sur ce billet de blog de Front End Tricks And Magic qui a fonctionné pour moi, alors j'ai pensé que je partagerais au cas où les gens seraient toujours curieux. L'essentiel du blog est que vous POUVEZ faire des points de suspension dans une entrée dans IE également, mais seulement si l'entrée a un attribut readonly.

De toute évidence, dans de nombreux scénarios, nous ne voulons pas que notre entrée ait un attribut en lecture seule. Dans ce cas, vous pouvez utiliser JavaScript pour le basculer. Ce code provient directement 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.

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

// making the 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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="long-value-input-container">
  <input type="text" class="long-value-input" value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" readonly />
</div>
24
jennEDVT

Réglage text-overflow:Ellipsis sur l'entrée elle-même a fait l'affaire pour moi. Il tronque et place les points de suspension lorsque l'entrée est floue.

19
Mo Bitar

D'après mes tests, Chrome, Safari et Firefox le supportent maintenant.

Cependant, ils ont des effets légèrement différents.

Sur flou, Firefox ajoute ... à droite du texte, mais uniquement s'il y a du texte masqué par le côté droit de la zone de texte.

Alors que sur flou Chrome semble sauter au début du texte et ajoute le ... à la fin, peu importe où vous avez laissé la position de défilement du texte.

4
Greg