Können Optionen in Auswahlen mehr als eine Zeile umfassen?

Question

Ich spreche von Ihrem Standard:

<select>
    <option>blah blah</option>
    <option>blah bl</option>
</select>

Mein Problem ist, dass ich für den Datensatz, den ich in diese Auswahlliste aufnehmen muss, ein paar Ausreißer habe:

Dies ist ein Verteilungsdiagramm der Gesamthäufigkeit (y-Achse) aller Zeichen (x-Achse) für die Zeichenfolgen in der Dropdown-Liste.

Der Durchschnitt liegt bei nur 18,5 Zeichen, aber um die 101 Zeichen lange Zeichenfolge unterzubringen, muss ich eine wirklich kleine Schriftart verwenden.

Gibt es eine Möglichkeit, den Text innerhalb einer <option></option> ? Ich habe versucht, einfach eine <br /> in der Mitte der Zeichenkette, und das wurde nicht validiert.

Answer 1

Generell gilt, dass einheimische <select> y <option> Formularsteuerelemente bieten nur sehr wenig Kontrolle darüber, wie sie gestaltet werden können, insbesondere wenn die Kompatibilität mit anderen Browsern ein Anliegen ist. Wenn Sie die Dinge viel besser kontrollieren wollen, ist es am besten, alles in einer normalen <select> Box (für die Barrierefreiheit) und dann mit einer gefälscht Auswahlfeld mit JavaScript. Ich musste dies in der Vergangenheit tun und die jQuery UI-Bibliothek funktionierte gut für mich.

In Ihrem Fall, eine mögliche UI, die könnte (wenn Sie die JavaScript ersetzen Weg gehen) wäre eine Ellipse auf die langen Elemente zu verwenden, aber dann zeigen ihren vollen Text auf mouseover y focus (es ist noch früh, daher sind dies vielleicht nicht die richtigen Ereignisse, aber Sie verstehen schon).

Sobald Sie JavaScript steuern eine gefälschte Select-Box, gibt es wirklich kein Ende, was Sie für die UI-Verhalten zu tun, aber letztlich, wenn Sie Kontrolle benötigen, native Formular-Steuerelemente in der Regel nicht schneiden.