Mattooltip：如何使框适合文本？

Question

我想将这段文本显示为工具提示。没有样式（只是字体大小定义为 16px），它看起来像这样：

我真正想要的是让文本显示在一行中 - 所以我在 css 中将空白设置为 pre ：

::ng-deep .mat-tooltip {
  font-size: 16px;
  white-space: pre;
}

但是现在文本超出了工具提示框：

我尝试将宽度设置为更高的 px 值，但没有任何作用。

有没有办法让方框适合文字？

[编辑 - 添加了评论中指出的缺失示例]：stackblitz 链接
尽管我将宽度设置为 400px，但示例中的文本不会离开框，而是被缩写，而不是框适合整个文本。

Answer 1

只需将最大宽度设置为

unset

。为此，请定义一个全局 CSS 类，如下所示：

.my-custom-tooltip {
  max-width: unset !important;
}

然后将类名传递给工具提示：

<button mat-raised-button
        matTooltip="This Infotext is displayed one line if possible. Just a little more text for demo!"
        matTooltipClass="my-custom-tooltip">
  Action
</button>

也正如@rinktaulous提到的，尽量不要使用

ng::deep

。

工作 Stackblitz 示例：https://stackblitz.com/edit/angular-qkh4cl

更新 (2023-07-23)：Angular 15+ 的解决方法

旧的答案不再有效，因为自 Angular 15 起，Angular Material 已迁移到基于 MDC 的组件。要解决该问题，您应该覆盖内部 MDC CSS 类的

max-width

规则：

mdc-tooltip__surface

。为了实现这一点，请定义全局 CSS 类，如下所示：

.my-custom-tooltip .mdc-tooltip__surface {
  max-width: unset !important;
}

使用 Angular 16 运行 Stackblitz 示例：https://stackblitz.com/edit/ncaweg