Umbrechen von Text in HTML Option

Ich möchte eine Dropdown-Liste auf meiner Seite einfügen. Da eine Option zu lang ist, wenn ich auf das Auswahlmenü klicke, wird sie erweitert und deckt den anderen Teil der Seite ab.Umbrechen von Text in HTML Option

<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>

Die zweite Option ist zu lang und wird erweitert. Könnte ich einen so langen Text in zwei Zeilen schreiben? Vielen Dank!

Quelle

2012-08-06 Chengzhi

Nein, Sie können den Text nicht in eine native Auswahl umbrechen. Ich schlage vor, die Breite der Auswahl auf eine feste Breite einzustellen. –

Da der Wert und der Text eines Select sehr unterschiedlich sein können. Ich würde sagen, wenn eine Zeichenfolge, die in Ihrer Auswahl für den Text länger als X ist, es abschneiden.

Beispiel mit jquery

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

setzen, dass in Ihrem Dokument bereit, und es wird Ihren Text trimmen sich auf eine bessere Größe, Ihre Elemente in einem div Verpackung, die den Überlauf verstecken wird, um etwas von ein Durcheinander später, und Sie werden wieder hier sein, um ein ähnliches Problem zu lösen, das dadurch für kleinere Saiten verursacht wird.

Quelle

2012-08-06 19:12:01 chris

+1, davon hätte ich nicht gedacht – bkconrad

Zwei Dinge, um diesen Code zu verbessern: benutze 'substring (0,15)' oder sonst werden die FINAL 15 Zeichen gepackt. Außerdem füge ich gern Ellipsen hinzu, wenn der Optionstext abgeschnitten wird, damit der Benutzer weiß, dass das der Fall war, wie zum Beispiel: 'text (myStrstring (0,15) + '...')'. Antwort bearbeitet, um diese einzuschließen ... – Marcus

Ein anderer schneller Kommentar: passen Sie auf zusätzlichen Leerzeichen in Ihrem HTML zwischen Optionstexten auf, wenn Sie dieses Javascript verwenden. Ihr Browser hat es vielleicht ausgekratzt, aber die JS 'length' Methode wird nicht funktionieren. – Marcus

wickeln, dass die Eingabe in einem div, einige Breite für div gesetzt, so daß die Leitung nicht außerhalb des div gehen, lik unter:

<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>

Quelle

2012-08-06 19:05:17 Shreedhar

eine feste Breite einstellen kann, indem einfach ohne die Verpackung div erfolgen mit

<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 der Praxis sollten Sie width: 500px in einer passenden Regel in Ihrer CSS-Datei setzen.

Quelle

2012-08-06 19:10:56 bkconrad

Umbrechen von Text in HTML Option

Antwort

Verwandte Themen