微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css – primeNg DataTabel单元格中的溢出文本

我想在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>

enter image description here

解决方法

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

这是最终解决方案……谢谢大家!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。