Cortar palabra al seleccionar opcion en un drodownlist

[mayid]

Es posible cortar una palabra al seleccionarla en un dropdownlist?
Necesito hacerlo porque para dar estilo a un select, lo envolvi en un div que tiene una flechita personalizada, que reemplaza a la original del select (que queda escondida gracias a la propiedad overflow: hidden). Algo así:

Código HTML:

<div class="variants td">
                
<select>
      <option selected="selected" disabled="disabled">Seleccione Variante</option>
      <option value="1" title="35.00">Light con cebollas y esparragos</option>                
</select>
                
</div>
 

Ese div tiene ancho fijo, una imagen de flechita en el fondo, y overflow: hidden.

La cuestion es que si el texto seleccionado es muy largo me queda sobrepasado del div, encima de la flechita. Por esto quiero recortar el texto. Sino, evaluaré opciones con CSS.

Gracias de antemano.