Question

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

我尝试了下面的css类（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;
}

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

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

解决方案：

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

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

Answer 1

将您的卡片包裹在div中，并将elementRef设置为div为#card

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

在调整大小(window:resize)="width=card.getBoundingClientRect().width"上设置宽度参数

See working code

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

Answer 2

我可以提供两种解决方案，我不想提供其中一种，但这是一种解决方案。

我建议您使用的解决方案是删除包装纸<mat-card-header>

<mat-card>
  <mat-card-title class="text-oneline">Heeeeeellllllloooo</mat-card-title>
  <mat-card-subtitle>World!</mat-card-subtitle>
  <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>

这会稍微改变布局，但是您可以通过添加自己的css类或使用自己的div包装它来解决此问题，只是不要使用<mat-card-header>，因为它做了不容易绕开的事情，但并非不可能，就像您将在我的第二个（不是那么推荐的）解决方案中看到的那样。

在第二种解决方案中，您将.text-online类移到<mat-card-header>上，如下所示：

<mat-card>
  <mat-card-header class="text-oneline">
    <mat-card-title >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>

，您的CSS更改为：

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

我不建议您使用第二种解决方案！

使用:: ng-deep被认为是非常不好的实践，因为它已被弃用，不再应该使用，但是到目前为止，Angular还没有提供替代方法。 More info

Answer 3

为此使用CSS分词：break-all 请参阅以下代码块

<mat-card>
  <mat-card-header>
    <mat-card-title  style="word-break: break-all">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>

如何制作角材料卡标题的衬板？

3 个答案: