Salto de línea en HTML ¿Seleccionar opción?

Question

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

Answer 1

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

Probablemente podría simularlo con algunas casillas de verificación con <label> s, y JS para convertirlo en un menú desplegable.

Answer 2

Sé que esta es una publicación anterior, 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.

<option value="1" title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts! Always be sure to read the fine print!">1</option> 

Answer 3

Un poco de un truco, pero esto da el efecto de una línea de múltiples seleccionar, pone en un bgcolor gris para su línea múltiple, y si selecciona cualquiera de los textos de color gris, se selecciona el primer 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; 
 
    } 
 
}

<select name="select1" id="select1" onchange="SelectFirst(this.value)"> 
 
    <option value="1" title="this is my long title for the yes option">Yes</option> 
 
    <option value="2">No</option> 
 
    <option value="2,1" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is my description for the no option</option> 
 
    <option value="2,2" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 2 for the no option</option> 
 
    <option value="3">Maybe</option> 
 
    <option value="3,1" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is my description for Maybe option</option> 
 
    <option value="3,2" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 2 for the Maybe option</option> 
 
    <option value="3,3" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 3 for the Maybe option</option> 
 
</select>

Answer 4

Código HTML

<section style="background-color:rgb(237.247.249);"> 
<h2>Test of select menu (SelectboxIt plugin)</h2> 
<select name="select_this" id="testselectset"> 
    <option value="01">Option 1</option> 
    <option value="02">Option 2</option> 
    <option value="03">Option 3</option> 
    <option value="04">Option 4</option> 
    <option value="05">Option 5</option> 
    <option value="06">Option 6</option> 
    <option value="07">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> 
    <option value="08">Option 8</option> 
    <option value="09">Option 9</option> 
    <option value="10">Option 10</option> 
</select> 
</section> 

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 hay que añadir un poco de jQuery select Box Jquery CSS

Jquery Ui Min JS

SelectBox Js

favor verifique este enlace JsFiddle Link

Answer 5

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

 <select> 
 
      <option>My real option text</option> 
 
      <option disabled style="font-style:italic">&nbsp;&nbsp;&nbsp;(...and my really really long option text that is basically a continuation of previous option)</option> 
 
      <option disabled style="font-style:italic">&nbsp;&nbsp;&nbsp;(...and still continuing my previous option)</option> 
 
      <option>Another real option text</option> 
 
     </select>

Answer 6

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

<select name="selector"> 
 
    <option value="1">Option 1</option> 
 
    <option value="2">Option 2</option> 
 
    <option value="3">Option 3</option> 
 
    <option disabled><hr></option> 
 
    <option value="4">Option 4</option> 
 
    <option value="5">Option 5</option> 
 
    <option value="6">Option 6</option> 
 
</select>

Answer 7

sí, mediante el uso de estilos CSS whi te-espacio: pre-wrap; en el.clase desplegable del programa de arranque anulándolo. Anteriormente es un espacio en blanco: nowrap; por lo que hace que el menú desplegable se envuelva en una línea. preenvoltura lo hace de acuerdo con el ancho.

Answer 8

En su lugar, tal vez intente reemplazar la selección con el marcado, p.

// Wrap any selects that should be replaced 
 
$('select.replace').wrap('<div class="select-replacement-wrapper"></div>'); 
 

 
// Replace placeholder text with select's initial value 
 
$('.select-replacement-wrapper').each(function() { 
 
\t $(this).prepend('<a>' + $('select option:selected', this).text() + '</a>'); 
 
}); 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 

 
<select id="dropdown" class="replace"> 
 
    <option value="First">First</option> 
 
    <option value="Second" selected>Second, and this is a long line, just to show wrapping</option> 
 
    <option value="Third">Third</option> 
 
</select>