angular - 如何防止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放在更合适的位置。