角度垫列表选项文本未被包裹

Question

我有复选框列表，当复选框的文本太长时，它不能正确地包裹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;
}

我希望复选框文本被换行，中间没有任何空格！！！请查看所附的屏幕截图，以供您参考。

Answer 1

.checkbox-list .checkbox-list-option.mat-list-option {
height: 48px;
}

这是通过删除线条高度来实现的！！！

Answer 2

更改:host ::ng-deep .mat-form-field-wrapper上的line-height

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