Come avvolgere il testo nell'opzione HTML

Question

Voglio mettere un elenco a discesa sulla mia pagina, poiché un'opzione è troppo lunga, quando faccio clic sul menu di selezione, si espanderà e coprirà l'altra parte della pagina.

<select id="selectlist" name="SelectProgram"> 

    <option value="LIR" >LIR</option> 
     <option value="How to word wrap text in HTML?">How to word wrap text in HTML? CSS/HTML text wrap for webkit</option> 

La seconda opzione è troppo lunga e si espanderà. C'è un modo in cui potrei avvolgere un testo così lungo in 2 righe? Grazie!

Answer 1

Vedere come il valore e il testo di una selezione possono essere molto diversi. Vorrei dire se nel caso in cui una stringa che è selezionata per il testo sia più lunga di X, la troncerà.

Esempio con jQuery

$('#myselect option').each(function() 
{ 
    var myStr = $(this).text(); 
    if(myStr.length > 15){$(this).text(myStr.substring(15));} 
}); 

messo che nel documento pronto, e sarà tagliare il testo fino ad una dimensione migliore, avvolgendo gli elementi in un div che nasconderà l'overflow sta andando a fare qualcosa di un guaio dopo, e tornerai qui cercando di risolvere un problema simile causato da quello per le stringhe che sono più piccole.

Answer 2

avvolgere che l'input in un div, mettere un po 'di larghezza per div, in modo che la linea non andrà al di fuori del div, lik qui sotto:

<div id="something" style="width:500px"> 
    <select id="selectlist" name="SelectProgram"> 
    <option value="LIR" >LIR</option> 
    <option value="How to word wrap text in HTML?">How to word wrap text in HTML? CSS/HTML text wrap for webkit</option> 
    </select> 
</div> 

Answer 3

Impostare una larghezza fissa può essere fatto senza l'involucro div semplicemente utilizzando

<select id="selectlist" name="SelectProgram" style="width: 500px"> 
    <option value="LIR" >LIR</option> 
    <option value="How to word wrap text in HTML?">How to word wrap text in HTML? CSS/HTML text wrap for webkit</option> 
</select> 

in pratica, si dovrebbe mettere width: 500px in una regola di corrispondenza nel file CSS.