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>

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

Answer 2

将以下样式应用于 datatable-header-cell-template-wrap 类，该类是作为 datatable-header-cell 类元素的子代创建的

  .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell .datatable-header-cell-template-wrap {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      vertical-align: middle;
      font-size: 12px;
      margin: -5px -10px 0px -10px;
      line-height: 1.2em;
      height: 4em;
    }

您可以根据需要调整线高，高度，内边距和大小值。

列名的自动换行

2 个答案: