web-dev-qa-db-fra.com

html select la largeur de la liste déroulante est trop grande

J'ai cherché une solution à mon problème mais je ne peux pas en trouver une, peut-être que je ne sais pas comment chercher cela en anglais car ce n'est pas ma langue maternelle.

Quoi qu'il en soit, mon problème est que j'essaie d'utiliser la fonctionnalité HTML et que l'une des options est très loooong. Si je laisse la largeur sans style, elle détruira tout le site. Si j'utilise la largeur, il ne montrera que quelque chose de la et semblera coupé. Cependant, j'ai vu un exemple comportant "..." que j'utilise volontiers mais je ne sais pas comment. 

Juste pour clarifier les choses, je cherche de l’aide pour que mon apparence ressemble à «Option longue…» Ou Si quelqu'un connaît une meilleure solution?

jqueryhtmlcssselectwidth
13
Sarah McLachlane

Exemple HTML:

<select id="myOptions">
    <option value="1"><span>Item 1</span></option>
    <option value="2">Item 2</option>
    <option value="3">Item 3 which has very very very very very long text</option>
    <option value="4">Item 4</option>
</select>

Exemple de CSS:

select{
    width: 100px;
    text-overflow: Ellipsis;
}

DEMO - Ajout ... à la valeur sélectionnée uniquement

Changez la largeur à votre guise. L'application de text-overflow: Ellipsis ajoute le ... au texte qui est plus long que la largeur spécifiée.

Ce style est seulement est appliqué à la valeur sélectionnée, mais affiche toujours les options au complet lorsque l'utilisateur clique sur le menu déroulant.

22
Nope

Si vous cherchez une solution très simple comme celle que vous avez décrite (en ajoutant ...), une solution de ce type devrait vous convenir: -

$(document).ready(function() {
    var maxLength = 15;
    $('#example > option').text(function(i, text) {
        if (text.length > maxLength) {
            return text.substr(0, maxLength) + '...';
        }
    });
});

Cela boucle simplement sur chaque option et vérifie la longueur de son texte. S'il est supérieur à maxLength, il sera raccourci à la même longueur que maxLength et ... y sera ajouté. 

Voici quelques exemples de balises qui vont avec: -

<select id="example">
    <option value="1">Short</option>
    <option value="2">Oh dear, this option has really long text :(</option>
</select>

Voici un violon

8
billyonecan

Si vous définissez width sur l’élément select, par exemple,.

select { width: 7em }

la liste déroulante apparaîtra toujours dans sa largeur naturelle.

Si une option est very long, vous avez quand même un problème de facilité d’utilisation et vous devez envisager de le raccourcir ou d’utiliser différentes commandes, comme un ensemble de boutons radio ou de cases à cocher.

3
Jukka K. Korpela

Vous pouvez résoudre ce problème en utilisant jQuery et en lisant this article.

var el;

$("select")
  .each(function() {
    el = $(this);
    el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
  })
  .mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });
3
Burimi

Cela dépend de la manière dont vous ajoutez les options à la sélection - est-il généré avec un langage côté serveur tel que PHP/Python/etc? Ou c'est du JS ou son HTML statique?

Vous pouvez utiliser n'importe laquelle de ces langues pour raccourcir les chaînes (avec ... à la fin). Ici vous pouvez trouver comment faire avec js: javascript raccourcir la chaîne sans couper les mots

Si vous êtes plus spécifique et affichez du code, je pourrais vous aider à accomplir cela dans votre cas particulier.

1
ddinchev

Changer/modifier le menu de sélection en utilisant css seul n'est pas possible. J'ai ajouté une petite démonstration utilisant jQuery pour simuler le problème avec la solution.

[Truncating or showing ellipses for Long option value][1]


  [1]: http://jsfiddle.net/xpvt214o/996293/
0
Mayank Nimje