html - Angular mat-list-option 文本未换行

问题描述

我有复选框列表，当复选框的文本太长时，它不能正确环绕 PFA 图像：

HTML 代码：

         <mat-selection-list #rolesSelection
                  class="checkbox-list"
                  [formControlName]="formControlName"
                  required>
             <div class="builder-role" *ngFor="let role of roles; index as i">
               <mat-list-option class="checkbox-list-option"
                   checkboxPosition="before"
                   (click)="onRoleSelect(role)"
                   (keyup.enter)="onRoleSelect(role)"
                   (keyup.space)="onRoleSelect(role)"
                   [value]="role">
               {{role.getName()}}
            </mat-list-option>
            <mat-form-field *ngIf="shouldShowControl(role.getRoleId())"
                  class="builder-students">
          <input appDigitOnly
           i18n-aria-label
           matInput
           aria-label="Number of students"
           max="{{maxNumberOfStudents}}"
           min="1"
           name="{{role.getRoleId()}}"
           type="number"
           value="{{getNumStudents(role)}}"
           [formControlName]="role.getRoleId()"
           [errorStateMatcher]="matcher"
           (change)="setStudents($event.target.value, role)">
        </mat-form-field>
       </div>
      </mat-selection-list>

CSS 代码：

 .checkbox-list {
  display: flex;
  flex-wrap: wrap;
}

.builder-role {
  display: flex;
  width: 50%;
}

.builder-students {
  max-width: 45px;
}

.role-error {
  font-size: 10px;
  text-align: right;
}

:host ::ng-deep .mat-form-field-infix {
  border: 0;
  text-align: center;
}

:host ::ng-deep .mat-form-field-wrapper {
  height: 100%;
  line-height: 160%;
  padding: 0;
}

:host ::ng-deep .mat-form-field-underline {
  bottom: 0;
}

:host ::ng-deep .mat-list-base .mat-list-item .mat-list-text,
:host ::ng-deep .mat-list-base .mat-list-option .mat-list-text {
  flex-direction: initial;
}

我希望复选框文本被包裹起来，中间没有任何空格！！！供您参考，请检查随附的屏幕截图。

标签： htmlcssangular

html - Angular mat-list-option 文本未换行

问题描述

解决方案

推荐阅读