Salto de línea en la opción de selección de HTML

¿Puedo tener un texto de dos líneas en una opción de selección html? ¿Cómo?

No, los navegadores no brindan esta opción de formato.

Probablemente puedas simularlo con algunas casillas de verificación con s, y JS para convertirlo en un menú desplegable.

Sé que esta es una publicación más antigua, pero dejo esto para quien venga a buscar en el futuro.

No puede formatear saltos de línea en una opción; sin embargo, puede usar el atributo del título para dar una información sobre herramientas con el mouse para dar la información completa. Usa un breve descriptor en el texto de la opción y da el nombre completo en el título.

  

Un poco de truco, pero esto da el efecto de una selección de múltiples líneas, pone un bgcolor gris para su línea múltiple, y si selecciona cualquier texto gris, selecciona el primero de la agrupación. Un poco inteligente, diría 🙂 La primera opción también muestra cómo puedes poner una etiqueta de título para una opción también.

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

¿Qué hay de poner el texto largo en otra justo debajo y deshabilitarlo? Puede ser una solución para alguien para publicar aquí.

   

código HTML

 

Test of select menu (SelectboxIt plugin)

Código Javascript

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

Código 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; } 

y tienes que agregar un poco de Jquery Library selecciona Box Jquery CSS

Jquery Ui Min JS

SelectBox Js

Por favor, consulte este enlace JsFiddle Link

No funciona completamente (la parte de la línea hr ) en todos los navegadores, pero aquí está la solución:

  

En su lugar, tal vez intente reemplazar la selección con el marcado, por ejemplo

 // 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; } 
   

sí, al usar estilos css white-space: pre-wrap; en la clase .downdown del bootstrap anulándolo. Anteriormente es un espacio en blanco: nowrap; por lo que hace que el menú desplegable se envuelva en una línea. pre-wrap lo hace de acuerdo con el ancho.