Angular 如何防止matTooltip文本被截断？

我有一个显示主机名的页面。主机名最多可以是63个字符，不带空格。我们截断UI上的文本。但是，当用户将鼠标悬停在截断的文本上时，我们需要出现一个工具提示，并通知用户完整的主机名

我有这个关于StackBlitz的示例页面。示例中有两个按钮，都带有长文本。区别在于一个有空格，另一个没有

包含空格的工具提示不会被截断，但不幸的是，缺少空格的工具提示会被截断。主机名没有空格，因此工具提示在这种情况下的行为与预期不符

有人能告诉我如何处理不包含空格的工具提示吗

---

谢谢。

截断是在CSS中发生的。您可以这样覆盖该CSS：

.example-tooltip-red1 {
  word-break: break-all !important;
  white-space: normal !important;
}

这是

---

注意：我将CSS放入

style.CSS

并使用

！重要的

关键字，因为我不确定级联在Angular应用程序中是如何工作的。您可能希望避免使用

！重要的

关键字，并将CSS放在更合适的位置。

效果完美。谢谢你的帮助。