在选项中使选择的选项更小/很长文本

Question

我一直在尝试在文本很长时控制选项的长度，并且我希望文本在其内容大于 300 像素时断行

我的代码：

.form-control-select option {
  font-size: smaller !important;
  width: 300px !important;
  white-space: break-spaces !important;
  overflow: hidden !important;
  word-wrap: normal !important;
  text-overflow: ellipsis !important; //use this if you want to shorten
}

.form-control-select {
  max-width: 200px !important;
  white-space: break-spaces !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important; //use this if you want to shorten
}

<select class="form-control-select" [(ngModel)]="selectedOption">
  <option selected>Open this select menu</option>
  <option style="width: 300px !important;" *ngFor="let item of Articulos_Select">
    {{ item.DESCRIPCION_INTERNA }}
  </option>
</select>

Answer 1

我编写的代码将使选择菜单的选项标签中的文本在达到 300 像素的宽度时断行。如果文本长于选项标签的宽度，文本也会被省略号 (…) 截断。

<select class="form-control-select" [(ngModel)]="selectedOption">
  <option selected>Open this select menu</option>
  <option style="width: 300px !important;" *ngFor="let item of Articulos_Select">
    {{ item.DESCRIPCION_INTERNA }}
  </option>
</select>

.form-control-select option {
  font-size: smaller !important;
  width: 300px !important;
  white-space: break-spaces;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-control-select {
  max-width: 200px !important;
  white-space: break-spaces;
  overflow: hidden;
  text-overflow: ellipsis;
}