htmlでselectタグ使用の際、長いテキストだとスマホ表示の際、選択後にはみ出る問題を解決したい。

selectタグで選択肢からプルダウンで選ぶ際、プルダウンで選ぶ段階では長いテキストが折り返され表示されるので問題はないのですが、選択後はフォームの中に一見収まっているようで収まっておらず、スマホ表示ではみ出てしまいます。
どのようにすればはみ出さずに収めることができるでしょうか？
初歩的な質問で大変恐縮ですが、回答いただけますと幸いです。
その他必要な情報があれば追記いたしますので、よろしくお願いします。

html
1<div class="rounded">
2  <div class="col-12">
3    <div style="width:100%" class="col-12 mb-3">
4      <label for="test">テスト</label>
5      <select name="test" class="form-control">
6        <option value="test" selected>---------</option>
7        <option value="test">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</option>
8        <option value="test">テストテストテストテスト</option>
9        <option value="test">テストテストテストテスト</option>
10      </select>
11    </div>
12  </div>
13</div>