Tengo el siguiente fragmento de código html y lo que pretendo es limitar la anchura de cada una de las etiquetas para que se muestren en un totalidad en pantalla y no se corten, ya bien sea mediante un salto de linea o un scroll horizontal.
<select class="form-control valid" data-val="true" data-val-number="El campo Acto Sujeto a debe ser un número." id="IdActo" name="IdActo" aria-describedby="IdActo-error" aria-invalid="false" style="width:150px"><option value="">Seleccionar</option>
<optgroup label="Actos">
<option value="1">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</option>
<option value="2">uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu</option>
</select>
He intentado añadir las rejillas de bootstrap col-xs-6 col-md-6 col-lg-6 pero únicamente afectan a la etiqueta select. No encuentro la manera de añadir diferentes estilos a cada .
¿Cómo podría hacerlo?
Un saludo