primeNg DataTable 单元格中的溢出文本

Posted 2023-03-06

【中文标题】primeNg DataTable 单元格中的溢出文本

【英文标题】：Overflow text in primeNg DataTabel cell

【发布时间】：2018-02-12 11:17:54

【问题描述】：

我想在 DataTable 单元格 primeNg 中隐藏溢出文本，但似乎没有任何效果。 我在他们的文档中没有找到任何可以帮助我的东西。

  <p-dataTable #dataTable 
tableStyleClass="defaultDataTable"
[value]="rows | async"
resizableColumns="false"
reorderableColumns="true" 
responsive="true"
[rowHover]="true" 
[(selection)]="selectedRows"
[rowStyleClass]="getRowClass" 
[loading] = "loading"
(onRowClick)="onSelect($event)" 
(onRowSelect)="onSelect($event)" 
(onRowUnselect)="onSelect($event)"
(onRowDblclick)="onRowDblclick($event)" 
(onHeaderCheckboxToggle)="checkAll($event)">
<p-footer class="table-footer p-text-muted" *ngIf="showFooter">
  <ng-container i18n> footerText: dataTable?.dataToRender?.length || 0 </ng-container>
</p-footer>
<p-column *ngIf="hasCheckboxColumn == true" [field]="IsSelected" [header]="" selectionMode="multiple"
  onclick="checkAll($event)" [sortable]="false" ></p-column>
      <p-column *ngFor="let column of columns" [field]="column.prop" [style] = "width: '20%'" [header]="column.name" [hidden]="!column.visible" [sortable]="isLockColumn(column.name) == false"  >
          <ng-template let-col let-row="rowData" pTemplate="body">
            <div *ngIf="isValueBoolean(row[col.field]); else renderValue" align="center" title=" ">
              <md-checkbox [(ngModel)]="row[col.field]" (change)="lockColumnChecked($event, row)" style = "width:20%;text-overflow: ellipsis;" [disabled]="true"></md-checkbox>
            </div>
            <ng-template #renderValue style = "width:20%;text-overflow: ellipsis;"><span style = "width:20%;text-overflow: ellipsis;" [mdTooltip]="getTooltip(row, column)" mdTooltipPosition="before">row[col.field]</span></ng-template>
          </ng-template>
          <ng-template *ngIf="isLockColumn(column.name)" pTemplate="header">
            <div class="lock-header">
              <md-checkbox [(ngModel)]="headerSelectClicked" (click)="changeStateOfRows(headerSelectClicked, rows, 'IsLocked')" class="lock-header-checkbox"></md-checkbox>
              <i class="fa fa-lock fa-1x" aria-hidden="true"></i>
            </div>
          </ng-template>
        </p-column>

【问题讨论】：

图片在附件中不可用...但是如果溢出：省略号不起作用，则使用自动换行：break-word;

尝试将 style.css 中的全局类定义为 -defaultDataTable word-wrap: break-word;

不，它没有用...我很沮丧

默认情况下它会被隐藏...数据表使用 CSS 属性溢出：隐藏。您能否尝试附上您的图片或任何 plunker 演示

1drv.ms/i/s!AgNenwMMyZRWg4tNRzRRcYMdqQa7-Q

【参考方案1】：

只需在 p 列中添加空白样式即可。这对我有用。

【参考方案2】：

 .ui-datatable-data> tr> td 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;

这是最终的解决方案...谢谢你们！

【讨论】：

@Filip 有什么方法可以只针对单个列吗？

@MurginBoo 你有没有尝试过类似的东西： .ui-datatable-data> tr> td:nth-child(2) // css