CSS Html:文本没有截断,导致容器增长

时间:2018-04-20 10:29:27

标签: html css angular flexbox angular-material

我的angular-material card里面有mat-table,其中包含备注。

下面的HTML和CSS

<div fxLayout="column" style="flex: 1;">
        <mat-card class="card-info" style="margin-right: 10px; max-height: 167px;">
            <mat-card-content>

                <div class="example-container">

                    <mat-table #table [dataSource]="notes">

                        <!-- Name Column -->
                        <ng-container matColumnDef="date">
                            <mat-header-cell *matHeaderCellDef> Date </mat-header-cell>
                            <mat-cell *matCellDef="let element"> {{element.created | date }} </mat-cell>
                        </ng-container>

                        <!-- Weight Column -->
                        <ng-container matColumnDef="subject">
                            <mat-header-cell *matHeaderCellDef> Subject </mat-header-cell>
                            <mat-cell *matCellDef="let element"> {{element.subject}} </mat-cell>
                        </ng-container>

                        <!-- Symbol Column -->
                        <ng-container matColumnDef="note">
                            <mat-header-cell *matHeaderCellDef> Note </mat-header-cell>
                            <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
                        </ng-container>

                        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                    </mat-table>
                </div>
            </mat-card-content>

        </mat-card>
    </div>

CSS:

.example-container {
    display: flex;
    flex-direction: column;
    max-height: 500px;
    min-width: 300px;
  }

  .mat-table {
    overflow: auto;
    max-height: 500px;
  }

  mat-header-cell, mat-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

尽管单元格内的文本会截断,但它并没有截断,导致卡片增长。我不想放置最大宽度,因为我希望它可以弯曲以填充屏幕的其余部分。

以下是它的外观图像:

enter image description here

正如你所看到的那样,它会让卡片从屏幕上消失。

0 个答案:

没有答案