html - 选择框选项宽度问题

Question

我面临着奇怪的问题。我的元素中有多个选择框。部分选择框选项宽度超过选择框宽度

正确的下拉列表:

不正确的下拉列表:

代码:

<div class="form-group">
  <label id="lbl_crms_customer_add_sector_title">{{'CRMS.CUSTOMER.FORM_LABEL.SECTOR' | translate}}</label>   <span class="inactive_text"> *</span>
    <select id="lbl_crms_customer_add_sector_value" class="custom-select" #sector="ngModel" name="sector" [ngModel]="BasicInfoDetails.sector">
      <!-- <option selected value="">--</option> -->
      <option *ngFor="let sectorobj of sectorList" value="{{sectorobj}}">{{sectorobj}}</option>                            
    </select>
  <span><input-errors [control]="sector"></input-errors></span>
</div>

注意:选项是从服务器动态加载的。期待你们最快的回答:)

Answer 1

这根本不是什么奇怪的行为。这就是它的工作方式。

选项不能包含在选择菜单中。默认情况下，select 元素占据最大的可用空间以容纳最大的option 宽度plus 下拉箭头。如果容器(在本例中不是浏览器)宽度不足以容纳完整的选项宽度 + 下拉箭头，省略号 (...) 将出现在 select 元素中。

以下是您的选择:

• 使用像素限制select 宽度。但是，选项窗口将在浏览器中占据尽可能多的宽度以显示完整的选项内容。如果它超过浏览器宽度，则省略号 (...) 出现在每个选项的末尾。

• 跳过 native 选择并将其替换为定制的下拉菜单，可以使用 CSS 样式对其进行限制，或者您可以允许内容换行。