HTML Dropdown (seleziona) con Text Wrap e Border dopo ogni valore (opzione)

Sto cercando di ottenere due cose con DropDown.

  • Per prima cosa voglio racchiudere il testo nell’elenco delle opzioni all’interno di un menu a discesa.
  • Secondo, voglio mettere un bordo dopo ogni opzione

e voglio supportare IE (e anche altri browser).

Questo perché avrei un testo lungo nel menu a discesa e non desidero tagliarli. Per questo motivo, voglio fare le cose di cui sopra.

Qualcosa come questo:-

http://jsfiddle.net/fnagel/GXtpC/embedded/result/

seleziona quello con “Uguale a formattazione del testo dell’opzione, Seleziona un indirizzo”. Si noti come le opzioni sono formattate e hanno un bordo inferiore con ciascuna di esse.

Ecco cosa ho provato (Testo): –

  line text How to wrap the big line text   line text How to wrap the big line text   line text How to wrap the big line text   line text How to wrap the big line text   

CSS

 .myselect { width: 150px; overflow: hidden; text-overflow: ellipsis; } .myselect option { white-space: nowrap; width: 100% border-bottom: 1px #ccc solid; /* This doesn't work. */ } 

 select { width:100px; overflow:hidden; white-space:pre; text-overflow:ellipsis; -webkit-appearance: none; } option { border: solid 1px #DDDDDD; } 

La risposta attualmente accettata tronca solo il testo con ellissi e aggiunge un bordo che non risolve completamente il problema.

Mi sembra che questa sia una risposta più completa e più compatibile con i browser. Rendere il testo in un elemento di avvolgimento automatico quando è troppo lungo?

In poche parole, puoi farlo nel modo giusto usando javascript, o farlo in modo semplice … non così compatibile usando la proprietà css white-space: pre-wrap sui tuoi elementi opzione.

Nota: se utilizzi white-space: pre-wrap , assicurati di aggiungere i -moz- e -o- browser.


Ecco cosa mi è venuto in mente come una soluzione CSS semplice e veloce (anche se quella di Jquery che ho menzionato è più robusta e migliore):

 select { width: 200px; max-width: 100%; /* So it doesn't overflow from it's parent */ } option { /* wrap text in compatible browsers */ -moz-white-space:pre-wrap; -o-white-space:pre-wrap; white-space:pre-wrap; /* hide text that can't wrap with an ellipsis */ overflow: hidden; text-overflow:ellipsis; /* add border after every option */ border-bottom: 1px solid #DDD; }