Coupure de ligne dans l’option de sélection HTML?

Non, les navigateurs ne fournissent pas cette option de formatage.

Vous pourriez probablement le faire avec des cases à cocher avec s et JS pour le transformer en menu déroulant.

Je sais que c’est un ancien message, mais je pars pour quiconque viendra à l’avenir.

Vous ne pouvez pas formater les sauts de ligne en une option; Cependant, vous pouvez utiliser l’atsortingbut title pour afficher une info-bulle au-dessus de la souris pour donner toutes les informations. Utilisez un descripteur court dans le texte de l’option et donnez le nom complet au titre.

 1 

Un peu de piratage, mais cela donne l’effet d’une sélection sur plusieurs lignes, met une couleur grise pour votre ligne multiple et, si vous sélectionnez l’un des textes en gris, il sélectionne le premier groupe. Kinda clever, je dirais 🙂 La première option montre également comment vous pouvez insérer une balise de titre pour une option.

  function SelectFirst(SelVal) { var arrSelVal = SelVal.split(",") if (arrSelVal.length > 1) { Valuetoselect = arrSelVal[0]; document.getElementById("select1").value = Valuetoselect; } } 

  Yes No    This is my description for the no option    This is line 2 for the no option Maybe    This is my description for Maybe option    This is line 2 for the Maybe option    This is line 3 for the Maybe option  

Que diriez-vous de mettre le texte long dans une autre juste en dessous et de le désactiver? Peut-être une solution de contournement pour quelqu’un qui poste ici.

   My real option text    (...and my really really long option text that is basically a continuation of previous option)    (...and still continuing my previous option) Another real option text  

Code HTML

 
 
Test of select menu (SelectboxIt plugin)
  Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup Option 8 Option 9 Option 10   

Code Javascript

  $(function(){ $("#testselectset").selectBoxIt({ theme: "default", defaultText: "Make a selection...", autoWidth: false }); }); 

Code CSS

 .selectboxit-container .selectboxit, .selectboxit-container .selectboxit-options { width: 400px; /* Width of the dropdown button */ border-radius:0; max-height:100px; } .selectboxit-options .selectboxit-option .selectboxit-option-anchor { white-space: normal; min-height: 30px; height: auto; } 

et vous devez append une bibliothèque Jquery sélectionnez la case CSS Jquery

Jquery Ui Min JS

SelectBox Js

S’il vous plaît vérifier ce lien JsFiddle Link

Ne fonctionne pas complètement (la partie ligne hr ) sur tous les navigateurs, mais voici la solution:

  Option 1 Option 2 Option 3 
 Option 4 Option 5 Option 6  

Au lieu de cela, essayez peut-être de remplacer le select par un balisage, par exemple

 // Wrap any selects that should be replaced $('select.replace').wrap('
'); // Replace placeholder text with select's initial value $('.select-replacement-wrapper').each(function() { $(this).prepend('' + $('select option:selected', this).text() + ''); }); // Update placeholder text with updated select value $('select.replace').change(function(event) { $(this).siblings('a').text( $('option:selected', this).text() ); }); 

 /* Position relative, so that we can overlay the hidden select */ .select-replacement-wrapper { position: relative; border: 3px solid red; /* to show area */ width: 33%; margin: 0 auto; } /* Only shows if JS is enabled */ .select-replacement-wrapper a { /* display: none; */ /* Notice that we've centered this text - you can do whatever you want, mulitple lines wrap, etc, since this is not a select element' */ text-align: center; display: block; border: 1px solid blue; } select.replace { position: absolute; width: 100%; height: 100%; top: 0; border: 1px solid green; opacity: 0; } 

   First Second, and this is a long line, just to show wrapping Third  

oui, en utilisant les styles css white-space: pre-wrap; dans la classe .dropdown du bootstrap en le remplaçant. Auparavant, il s’agit d’un espace blanc: nowrap; il rend donc la liste déroulante dans une seule ligne. pré-enrouler le rend selon la largeur.