web-dev-qa-db-fra.com

Utilisation des points de suspension dans Angular

Par défaut, Angular Material Table place le contenu dans une nouvelle ligne ci-dessous s'il déborde de la cellule dans laquelle il est contenu. J'essaie de le définir de sorte que le texte débordant soit tronqué avec ". .. "à la place. Le code que j'ai actuellement ne tronque pas le contenu et l'affiche sur une seule ligne jusqu'à ce qu'il déborde du parent <div>

J'utilise <table mat-table> au lieu de <mat-table> car il contient des colonnes qui se redimensionnent en fonction de leur contenu, comme décrit dans Site Web sur les matériaux angulaires . Le tableau que j'essaie de créer est réactif et se redimensionne en fonction de la taille de son parent <div>

HTML:

<div class="table-content">
  <table mat-table [dataSource]="dataSource" class="table-container">
    <ng-container [matColumnDef]="item" *ngFor="let item of displayedColumns">
      <th mat-header-cell *matHeaderCellDef>{{item}} </th>
      <td mat-cell *matCellDef="let element">
        <div class="table-data-content">
          <span>{{element[item]}}</span>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

CSS:

.table-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.table-data-content {
  overflow: hidden;
  text-overflow: Ellipsis;
  white-space: nowrap;
}

Exemples de données utilisées dans Angular Component:

  dataSource = [
    { Name: "Some file name that is very long", Date: '08/30/2017', Uploader: 'Some uploader name that is very long'},
    { Name: "Some file name that is very long", Date: '08/30/2017', Uploader: 'Some uploader name that is very long'}
  ];

  displayedColumns = ['Name', 'Date', 'Uploader'];

Que puis-je corriger pour utiliser correctement Ellipsis dans ma table?

Mise à jour: Les points de suspension fonctionnent si j'ajoute le CSS suivant, dont je ne sais toujours pas pourquoi.

td {
max-width: 0px;
}

Cependant, cette approche perturbe la manière Angular Material Table affecte efficacement la largeur de chaque colonne en fonction de la longueur du contenu afin que le contenu soit tronqué lorsque l'autre colonne a encore beaucoup d'espace vide Y a-t-il une meilleure solution à cela?

cssangularhtml-tableangular-materialangular5
7
Sonul

Votre problème numéro un est que vous appliquez votre largeur et votre hauteur sur "table-content" à la place, vous devez l'appliquer directement à la table tag.

Essaye ça:

table {
  width: 100%;
  table-layout: fixed;
}

th, td {
  overflow: hidden;
  width:auto;
  text-overflow: Ellipsis;
  white-space: nowrap;
}

on table tag use table-layout: fixed est appliqué, le contenu ne dicte plus la mise en page, mais à la place, le navigateur utilise les largeurs définies à partir de la première ligne du tableau pour définir largeurs de colonne.

6
Atom23