将省略号添加到长下拉列表选项

Question

我一直在尝试通过添加省略号来使长下拉菜单保持整洁，但这是行不通的。有指导吗？我担心的是在移动设备上，下拉菜单看起来很糟糕，并且有可能破坏页面。

#DropDownList1 {
  text-overflow: ellipsis;
  overflow: hidden !important;
}

#DropDownList1 option {
  text-overflow: ellipsis;
  overflow: hidden !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>



<div class="row">
  <div class="col-lg-12">
    <select name="DropDownList1" id="DropDownList1" class="form-control">
      <option value="36368">HEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHE </option>
      <option value="36414">test</option>
    </select>
  </div>
</div>