將鼠標懸停在 mat-autocomplete 中時如何顯示整個選項值

Question

這是使用 mat-autocomplete 的演示應用程序，我從 stackoverflow 帖子中選擇了此處輸入鏈接描述，我想顯示選項的整個值。 當值很長時。 我發現類似的問題要求在此處輸入鏈接描述，但這並沒有解決我的問題。 我可以滾動並查看值，可以修改 css 樣式以便滾動條正確可見。

看起來滾動條的剩余部分被隱藏了！

我試過

.mat-option {

z-index:5000;
height:300px;
}

什么都沒有解決！

如果元素完整顯示會更好。

代碼片段template.html

  <mat-form-field class="example-full-width">
    <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete" panelWidth="320px">
      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

打字稿.ts

 states: State[] = [
    {
      name: 'Arkansas',
      population: '2.978M',
      // https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
      flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
    },
    {
      name: 'California CaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCalifornia',
      population: '39.14M',
      // https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
      flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
    }

  ];

 constructor() {
    this.filteredStates = this.stateCtrl.valueChanges
      .pipe(
        startWith(''),
        map(state => state ? this._filterStates(state) : this.states.slice())
      );
  }

  private _filterStates(value: string): State[] {
    const filterValue = value.toLowerCase();

    return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0);
  }

Answer 1

你有3種方法來解決這個問題

1. 將滾動添加到mat-option因為您的問題中已經有了

2.為mat-select賦予寬度，但如果mat-option太長，這也會出現問題。

3.此選項是換行文本 - 在 css 下方添加到mat-option

.mat-option {
 word-break: break-all;
 white-space: normal;
 height: unset;
}