Estoy lidiando con un problema que no puedo encontrar una solución para este problema simple que me molesta. Tengo un formulario de selección en mi página de un solo producto (usando woocommerce) para seleccionar la variación del producto. Descubrí que esta selección se crea en el archivo variable.php con wc_dropdown_variation_attribute_options. ¿Hay alguna forma, para texto más largo en opciones, de que el texto se muestre en varias líneas? Por ejemplo, si el campo de selección tiene un ancho de 200 px, necesito que todas las opciones tengan el mismo ancho y que las que tienen texto largo se muestren en varias líneas. He buscado y probado de todo pero sin éxito. es posible? Por ahora, la única solución que he encontrado es dividir las cadenas que tienen una longitud mayor que la especificada, pero de esa manera el texto se recorta y quiero mostrar el texto completo pero en varias líneas. ¡Gracias!

Aquí está el código para el campo de selección:

 <table class="variations table" cellspacing="0"> <tbody> <tr> <td class="label"><label for="online">Product Variations</label></td> <td class="value"> <select id="online" class="" name="attribute_online" data-attribute_name="attribute_online" data-show_option_none="yes"> <option value="" title="Choose an option">Choose an option</option> <option value="shorttext" title="shorttext" class="attached enabled">Short text</option> <option value="VeryLongText" title="VeryLongText" class="attached enabled">VeryLongText</option> </select> </td> </tr> </tbody> </table>

Y aquí hay dos cosas que he intentado con css pero sin éxito:

 option { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } select > option{ max-width: 200px !important; box-sizing: border-box; white-space: normal; word-wrap: break-word; }

Lo único que funciona es este código de secuencia de comandos de Java, pero solo recorta el texto si tiene más de 35, y esto no resuelve mi problema:

 var optionText, array = [], newString, maxChar = 35; $('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) { newString += '...'; $(e).text(newString); return false; } }); } }); });