drop - menu desplegable html

Opciones de ajuste de texto en una lista de selección

Question

¿Es posible ajustar opciones largas dentro de una lista de selección?

Tengo una lista de selección dinámica, y algunas de las opciones son bastante largas. Me gustaría que las opciones sean demasiado largas para pasar a la siguiente línea. Más allá de eso, me gustaría aplicar sangría a esas líneas.

Mi solución si esto no es posible es simplemente recortar el resultado a n caracteres.

Esto es lo que tengo:

I''m a short option
This is a really really really long option
This one isn''t too bad
But whoa look how long I am! I go on forever!

Y esto es lo que me gustaría tener:

I''m a short option
This is a really really 
    really long option
This one isn''t too bad
But whoa look how long 
    I am! I go on forever!

Answer 1

Aquí hay una solución jQuery rápida y pura que puede ayudar a algunos. Además de crear su propio menú desplegable y extraer los valores / texto de una selección oculta como mencionó Scott Evernden. Esto te dará espacio para jugar. No se corta en medio de una palabra, pero al mismo tiempo no envuelve el texto. Pondrá el texto completo en el título para que el usuario pueda volcar y ver la palabra completa envuelta. Luego usará la configuración de maxChar para ir a un cierto número de caracteres y luego buscará el final de la palabra en la que se encuentra para no cortar la palabra. El min-ancho de la opción debe mantenerse en línea con la selección, pero continúe jugando con la variable maxChar y evitará que se salga de los límites. Esta es una solución breve, ya que en la mayoría de los casos voy con una solución personalizada, pero para listas rápidas donde los usuarios pueden saber lo que están eligiendo con la primera palabra o dos, esto funciona muy bien. Espero que esto ayude a alguien:

var optionText, array = [], newString, maxChar = 40;
$(''select'').each(function(){
    $(this).find(''option'').each(function(i,e) {
        $(e).attr(''title'',$(e).text());
        optionText = $(e).text();
        newString = '''';
        if (optionText.length > maxChar) {
            array = optionText.split('' '');
            $.each(array,function(ind,ele) { 
                newString += ele+'' '';
                if (ind > 0 && newString.length > maxChar) {
                    $(e).text(newString);
                    return false;
                }
            });

        }
    });
});

Answer 2

no puedes hacer esto con una <option> estándar, necesitarás rodar por tu cuenta o encontrar un complemento de menú