在primeNg DataTabel单元中溢出文本

guys！我想隐藏在DataTable单元格中的溢出文本，但没有任何工作，有人可以帮助我吗？我没有找到they'r文档任何可以帮助我在primeNg DataTabel单元中溢出文本

<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>

来源

2017-09-04 Filip Laurentiu

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

尝试在style.css中定义全局类as -'defaultDataTable {word-wrap：break-word;}' – TimeTraveler

不，它不工作...我很沮丧 –

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

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

来源

2017-09-04 10:18:40

在primeNg DataTabel单元中溢出文本

回答

相关问题