I'm dealing with an issue that I can't find a solution for this simple problem that bugs me. I have a select form on my single product page ( using woocommerce ) for selecting the variation of the product. I found out that this select is created in variable.php file with wc_dropdown_variation_attribute_options. Is there any way, for longer text in options, that text to be shown in multiline? For example, if select field have width 200px, I need all of the options to have the same width, and the ones who have long text, to be shown in multiline. I have searched and tried everything but without success. Is this possible? For now, the only solution I've found is to split the strings that have length bigger than the one specified, but on that way the text is getting trimmed and I want to show the whole text but in multiple lines. Thanks!

Here is the code for the select field:

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

And here are two things that I've tried with css but with no success:

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

The only thing that works is this Java script code, but it just trims the text if longer than 35, and this don't solve my issue:

    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;
                }
            });

        }
    });
});