Come suddividere una linea nel menu a discesa select2?

Question

Sto usando un menu a discesa di selezione 2 e quindi mostrando alcune frasi lunghe nel suo contenuto. Voglio aggiungere interruzioni di riga alla frase nel posto giusto, ma il menu a discesa è la regolazione automatica.

Per esempio il contenuto del menu a discesa a destra appare come segue:

La linea assomiglia a questo momento

selezionare 2 rate di $ 100. (. Speciale

offerta)

ho bisogno di aggiungere interruzioni di riga controllati in modo che assomiglia a questo:

selezionare 2 rate di $ 100.

(offerta speciale.)

non wan't per aumentare la larghezza di discesa o modificare la dimensione del carattere.

mio codice è qui a jsfiddle:

<select multiple id="e1" style="width:300px"> 
    <option value="1">select 1 installment of $200</option> 
    <option value="2">select 2 installments of $100. (special offer.)</option> 
    <option value="3">select 3 installments of $89</option> 
    <option value="4">select 4 installments of $50. (no interest in this option)</option> 
    <option value="5">select 5 installments of $45</option> 
</select> 

Answer 1

Per select2 versione 3.5 o inferiore, l'ho risolto con le proprietà "formatResult" & "formatSel essione".

Se si utilizza v4.0 o superiore, utilizzare "templateResult" e "templateSelection". E nella funzione di callback utilizzare un tag jquery, in modo che il tag html per la linea di separazione non venga disinfettato.

Il jsfiddle risolto here lo mostra per select2 v3.5 e seguenti.

ho dichiarato la discesa select2 in javascript come questo:

$('#color').select2({ 
placeholder: "Select something", 
minimumResultsForSearch: Infinity, //removes the search box 
formatResult: formatDesign, 
formatSelection: formatDesign 
}); 

e nella funzione di callback - formatDesign(), ho diviso tutte le corde e aggiungere tag br in esso come questo

function formatDesign(item) { 
var selectionText = item.text.split("."); 
var $returnString = selectionText[0] + "</br>" + selectionText[1]; 
return $returnString; 
}; 

(nota: per la versione 4.0 e successive utilizzare una stringa jquery, per aggiungere br alla stringa. Sarebbe simile a questa :)

var $returnString = $('<span>'+selectionText[0] + '</br>' + selectionText[1] + '</span>'); 

Answer 2

Non si può farlo con HTML e CSS dritto. Dovrai creare un menu a discesa personalizzato con javascript.

Answer 3

Penso che devi provare diversi plug-in di opzioni di selezione per fare lo stesso secondo il vostro requisito. Conosco un plugin che può fare qualcosa come te. Qui è la fonte di quel plugin

Ecco il link demo violino:

http://jsfiddle.net/GXtpC/2099

Potete trovare il codice sorgente di questo menu è qui: https://github.com/fnagel/jquery-ui/wiki/Selectmenu

$(function(){    
 
    
 
    
 
    $('select#speedB').selectmenu({ 
 
     style:'popup', 
 
     width: 300, 
 
     format: addressFormatting 
 
    }); 
 
    
 
    
 
    
 
    
 
});   
 

 
//a custom format option callback 
 
var addressFormatting = function(text){ 
 
    var newText = text; 
 
    //array of find replaces 
 
    var findreps = [ 
 
     {find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'}, 
 
     {find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'}, 
 
     {find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'}, 
 
     {find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'}, 
 
     {find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'} 
 
    ]; 
 
    
 
    for(var i in findreps){ 
 
     newText = newText.replace(findreps[i].find, findreps[i].rep); 
 
    } 
 
    return newText; 
 
} 

/* demo styles */ 
 
body {font-size: 62.5%; font-family:"Verdana",sans-serif; } 
 
fieldset { border:0; } 
 
label,select,.ui-select-menu { float: left; margin-right: 10px; } 
 
select { width: 200px; }  
 
.wrap span.ui-selectmenu-item-header, 
 
.wrap ul.ui-selectmenu-menu li a { text-decoration: underline !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.selectmenu.js"></script> 
 
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.position.js"></script> 
 
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script> 
 
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script> 
 
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.core.js"></script> 
 
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.selectmenu.css" rel="stylesheet"/> 
 
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.theme.css" rel="stylesheet"/> 
 
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.core.css" rel="stylesheet"/> 
 
<form action="#"> 
 
    <br /><br /><br /> 
 
    
 
    
 
    <h2>Same with option text formatting</h2> 
 
    <fieldset> 
 
     <label for="speedB">Select an Address:</label> 
 
     <select name="speedB" id="speedB"> 
 
      <option>John Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option> 
 
      <option selected="selected">Jane Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option> 
 
      <option>Joseph Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option> 
 
      <option>Mad Doe Kiiid - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option> 
 
     </select> 
 
    </fieldset> 
 
    
 
    
 
</form>

Spero che questo ti possa aiutare.

Answer 4

Se si conosce il valore del menu a discesa di selezione, è possibile aggiungere il riempimento sul lato destro in modo che possa romperlo. Ecco una demo secondo il vostro requisito

$("#e1").select2();

.select2-results li{padding-right:80px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script> 
 
<select multiple id="e1" style="width:300px"> 
 
     <option value="1">select 1 installment of $200</option> 
 
    <option value="2">select 2 installments of $100. (special offer.)</option> 
 
    <option value="3">select 3 installments of $89</option> 
 
    <option value="4">select 4 installments of $50. (no interest in this option)</option> 
 
    <option value="5">select 5 installments of $45</option> 
 
    </select>

Answer 5

ho provato in css itz lavorato controllare questo

.select2-results .select2-result-label 
{ 
    width:200px; 
    word-wrap: break-word; 
} 
.select2-search-choice 
{ 
    width:200px; 
} 

http://jsfiddle.net/Rajkumarrana/fyhsz9ra/12/

Speranza Il suo utile per voi ...Grazie

Answer 6

io ho una soluzione grezza che ancora gli utenti il ​​plugin select2, utilizzando white-space:pre; per lo stile della select2 li elementi come ad esempio:

.select2-drop li { 
    white-space: pre; 
} 

Ecco la versione aggiornata di fiddle

Se questo funziona per te posso aiutarti a perfezionare ulteriormente.

Answer 7

Il seguente codice CSS ti aiuterà con un impatto minimo.

.select2-drop li { 
    white-space: pre-line; 
} 

ma il codice HTML sarà simile:

<option value="2">select 2 installments of $100. 
(special offer.)</option> 

http://jsfiddle.net/mehd31hn/

(visto la mia risposta è quasi simile a Sworrub Wettham, ma suggeriscono utilizzando pre-line su pre dal momento che questo non lo fa effetto lo spazio possibile tra la nuova linea.)