如何制作角材料卡标题的衬板? [英] How to make Angular Material Card Title one liner?

问题描述

我无法强迫mat-card-title停留在一行中并切断多余的文本.

I am unable to force mat-card-title to stay in one line and cut off the extra text.

我尝试了下面的css类(text-oneline).

I have tried the css class below (text-oneline).

<mat-card>
  <mat-card-header>
    <mat-card-title class="text-oneline">Heeeeeellllllloooo</mat-card-title>
    <mat-card-subtitle>World!</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image [src]="icon_url" alt="App Icon">
  <mat-card-content>
    <p>Some Text</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Hello</button>
  </mat-card-actions>
</mat-card>

.text-oneline {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

现在，文本比卡片长.我希望文本停止并且不会使卡溢出. 我希望文本填充所有可用空间，但不要超过垫卡的宽度.

Right now, the text is longer than the card. I would like the text to stop and not overflow the card. I want the text to fill all available space but not go over the width of the mat-card.

示例: https://angular-mat-card-example-4cb2wk.stackblitz .io

解决方案:

לבנימלכה编写的代码效果很好，但仅在触发window.resize之后.我发现的简单解决方案是编辑mat-card-header.

The code by לבני מלכה works great, but only after window.resize is triggered. The simples solution I found was editing mat-card-header.

mat-card-header {
  display: flow-root;
}

推荐答案

将卡片包装在div中，并将elementRef设置为div为#card

Wrap you card in div and set elementRef to div as #card

然后将宽度设置为header作为卡的宽度[style.width.px]="width - 50"

Then set width to header as the card's width [style.width.px]="width - 50"

在调整大小(window:resize)="width=card.getBoundingClientRect().width"

查看工作代码

<div #card (window:resize)="width=card.getBoundingClientRect().width">
<mat-card>
  <mat-card-header>
    <mat-card-title class="text-oneline" [style.width.px]="width - 50">Heeeeeellllllloooo</mat-card-title>
    <mat-card-subtitle>World!</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image [src]="icon_url" alt="App Icon">
  <mat-card-content>
    <p>Some Text</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Hello</button>
  </mat-card-actions>
</mat-card>
</div>

CSS

.text-oneline {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

这篇关于如何制作角材料卡标题的衬板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！