单词包装的名称

Question

我使用ngx-datatable来显示我的数据，我不想显示水平滚动条所以我需要自动换行列名，这样我可以减少列的宽度，最终删除水平滚动条

我试图添加这个CSS，以便它被包装但似乎不起作用

.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  text-align: center !important;
  vertical-align: middle !important;
}

我也尝试使用断字，但这也行不通。

这是我的HTML

<ngx-datatable style="height: 410px" class="material" [rows]="assignedTinYearsList" [columns]="assignedTinYearsListColumns" [sortType]="'multi'"
                        [columnMode]="'standard'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [limit]="10" [scrollbarV]="true" [scrollbarH]="true">
                        </ngx-datatable>

这是列名列表

this.assignedTinYearsListColumns = [
            { 'name': 'TIN Year Name', 'prop': 'tinYearName', 'cellTemplate': this.tinYearLinkColumnTpl },
            { 'name': 'TIN', 'prop': 'tin', 'cellTemplate': this.tinLinkColumnTpl },
            { 'name': 'CMS Quality Rep. Type', 'prop': 'reportingType' },
            { 'name': 'CMS IA Rep. Type',  'word-wrap': 'break-word', 'prop': 'iaReportingType' },
            { 'name': 'MFFS Billing', 'prop': 'mffsBilling', 'width': '100', 'cellTemplate':this.provdetailmffsyesNoColumnTemplate},
            { 'name': 'Quality Goal Exclusion', 'word-wrap': 'break-word', 'prop': 'qualityGoalsExclusion','width': '170', 'cellTemplate': this.qualityCheckBoxColumnTpl },
            { 'name': 'Quality Exclusion Reason', 'overflow-wrap': 'break-word', 'prop': 'qualityExclusionReason', 'width': '192', 'cellTemplate': this.QualityDropShowReason },
            { 'name': 'IA Goal Exclusion', 'prop': 'goalExclusion','width': '130', 'cellTemplate': this.checkBoxColumnTpl },
            { 'name': 'IA Exclusion Reason', 'prop': 'exclusionReason', 'width': '192', 'cellTemplate': this.DropShowReason },
        ];

我需要包装列名称的大小，例如“质量目标排除”。征求建议。

Answer 1

在我的情况下，我使用[columnMode] = "'force'"使用'flexbox'和每行：

<ngx-datatable-column name="event" prop="event" [flexGrow]="1">
    <ng-template let-column="column" ngx-datatable-header-template>
        <div> foo </div>
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
        <div> {{value}} </div>
    </ng-template>
</ngx-datatable-column>

它生成更多代码，但更容易编辑。