如何防止 matTooltip 文本被截断？

Question

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

https://stackblitz.com/edit/truncatedtooltips?file=app%2Ftooltip-overview-example.html

我在 StackBlitz 上有这个示例页面。示例中有两个按钮，都带有长文本。不同的是，一个有空格，另一个没有。

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

谁能告诉我如何处理不包含任何空格的工具提示？

谢谢。

Answer 1

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

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

这里是your original example with the updated CSS。

注意：我将 CSS 放入 style.css 并使用了 !important 关键字，因为我不确定 Angular 应用程序中的级联是如何工作的。您可能希望避免使用 !important 关键字并将 CSS 放在更合适的位置。