Ellipses pour le texte de débordement dans les listes déroulantes

Question

Je corrige la largeur d'une de mes listes déroulantes (oui, je sais que cela pose des problèmes de compatibilité entre navigateurs).

Existe-t-il un moyen non-js de couper le texte qui déborde et d'ajouter des ellipses ? text-overflow:ellipsis ne fonctionne pas pour <select> (du moins dans Chrome).

select, div {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}

<!--works for a div-->
<div>
    A long option that gets cut off
</div>

<!--but not for a select-->
<select>
    <option>One - A long option that gets cut off</option>
    <option>Two - A long option that gets cut off</option>
</select>

Exemple ici : http://jsfiddle.net/t5eUe/

Answer 1

Si vous trouvez cette question parce que vous avez une flèche personnalisée dans votre boîte de sélection et que le texte passe par-dessus votre flèche, j'ai trouvé une solution qui fonctionne dans certains navigateurs. Il suffit d'ajouter un peu de rembourrage à l'élément select sur le côté droit.

Avant :

Après :

CSS :

select {
    padding:0 30px 0 10px !important;
    -webkit-padding-end: 30px !important;
    -webkit-padding-start: 10px !important;
}

iOS ignore le padding mais utilise les propriétés -webkit- à la place.

http://jsfiddle.net/T7ST2/4/

Answer 2

NOTE : A partir de juillet 2020, text-overflow: ellipsis travaille pour <select> sur Chrome

Le HTML est limité dans ce qu'il spécifie pour les contrôles de formulaires. Cela laisse le champ libre aux fabricants de systèmes d'exploitation et de navigateurs pour faire ce qu'ils pensent être approprié sur cette plateforme (comme les contrôles modaux de l'iPhone). select qui, lorsqu'il est ouvert, a un aspect totalement différent du menu contextuel traditionnel).

Si cela vous dérange, vous pouvez utiliser un substitut personnalisable, comme Choisi qui se distingue de l'indigène select .

Ou encore, déposez un bogue contre un système d'exploitation ou un navigateur majeur. Pour autant que nous le sachions, la façon dont le texte est coupé en select est peut-être le résultat d'un oubli vieux de plusieurs années que tout le monde a copié, et il est peut-être temps de changer.

Answer 3

La solution la plus simple pourrait être de limiter le nombre de caractères dans le HTML lui-même. Rails dispose d'un truncate(string, length) et je suis certain que quel que soit le backend que vous utilisez, il fournit quelque chose de similaire.

Compte tenu des problèmes liés aux navigateurs croisés que vous connaissez déjà concernant la largeur des boîtes de sélection, cette option me semble la plus simple et la moins sujette aux erreurs.

<select>
  <option value="1">One</option>
  <option value="100">One hund...</option>
<select>

Answer 4

Quirksmode a une bonne description de la propriété "text-overflow", mais vous devrez peut-être appliquer d'autres propriétés comme "white-space : nowrap".

Bien que je ne sois pas sûr de la façon dont cela se comportera dans un objet sélectionné, cela peut valoir la peine d'essayer d'abord :

http://www.quirksmode.org/css/textoverflow.html

Answer 5

Vous pouvez utiliser le css3 appearance propriété :

select {
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis;
  -webkit-appearance: none;
}

Cela désactivera le style du domaine de l'ombre et le style de l'ombre. overflow: ellipsis fonctionnera. Cependant, cela désactivera tous les styles par défaut (donc plus de bouton fléché, etc.), et vous aurez toujours à faire face à d'autres navigateurs (non webkit).

Pour une démonstration : http://jsfiddle.net/t5eUe/179/