title: word wrap in select option menu
body: <p>How could I wrap the text inside option menu? I want the option value following the width of the select picker. short text works well, but not with long text.</p>
  
  <p>I have tried many things inside this forum but nothing work. I'm using <code>bootstrap classes</code> and no additional <code>css</code> yet.</p>
  
  <p>select option menu with short text</p>
  
  <p><a href="https://i.stack.imgur.com/nOOLw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nOOLw.png" alt="enter image description here"></a></p>
  
  <p>select option menu with long text</p>
  
  <p><a href="https://i.stack.imgur.com/y2pmN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y2pmN.png" alt="enter image description here"></a></p>
  
  <pre><code>  &lt;div class="form-group col-md-5"&gt;
                          &lt;label for="programstrategis_id"&gt;Program Strategis&lt;/label&gt;
                          &lt;select id="programstrategis_id"
                              class="selectpicker data-content form-control @error ('programstrategis_id') is-invalid @enderror"
                              name="programstrategis_id"&gt;
                              &lt;option selected disabled&gt;--silahkan pilih program strategis berikut--&lt;/option&gt;
                              @foreach ($programstrategis_id as $dataprogramstrategis)
                              &lt;option value="{{ $dataprogramstrategis-&gt;id }}"&gt;{{$dataprogramstrategis-&gt;program_strategis}}
                              &lt;/option&gt;
  
                              @endforeach
                          &lt;/select&gt;
                          @error('programstrategis_id')
                          &lt;div class="invalid-feedback"&gt;
                              {{ $message }}
                          &lt;/div&gt;
                          @enderror
                      &lt;/div&gt;
  
                      &lt;div class="form-group col-md-5"&gt;
                          &lt;label for="sasaran_id"&gt;Sasaran&lt;/label&gt;
                          &lt;select id="sasaran_id"
                              class="selectpicker form-control @error ('sasaran_id') is-invalid @enderror"
                              name="sasaran_id"&gt;
                              &lt;option selected disabled&gt;--silahkan pilih sasaran berikut--&lt;/option&gt;
                              @foreach ($sasaran_id as $datasasaran)
                              &lt;option value="{{ $datasasaran-&gt;id }}"&gt;{{$datasasaran-&gt;sasaran}}&lt;/option&gt;
                              @endforeach
                          &lt;/select&gt;
                          @error('sasaran_id')
                          &lt;div class="invalid-feedback"&gt;
                              {{ $message }}
                          &lt;/div&gt;
                          @enderror
                      &lt;/div&gt;
  </code></pre>