角度2材料matTooltip多线

Question

我是Angular 2 Material的新手。什么是使工具提示多线的首选方法？

例如，我可能有以下工具提示：

AA BBBBBBBBBB CCCC DDDDD

而且，我可能想让它以多行格式显示，如下所示：

AA BBBBBBBBBB 
CCCC 
DDDDD

Answer 1

首先，为工具提示创建一个类，使其在换行符上断行。

.my-tooltip {
    white-space: pre-line;
}

然后，将类添加到工具提示，并使用代码换行

<span 
    matTooltip="First line&#13;Second line"
    [matTooltipClass]="'my-tooltip'">
</span>

Answer 2

你甚至可以在没有\ n或者需要的情况下实现同样的目标只需编写您的内容，例如：

“abc abc abc”如果你需要它是多线的

你需要做的就是

    ::ng-deep .mat-tooltip  {
    white-space: pre-line    !important;
}

将上面的内容添加到您的CSS中

Answer 3

在我的例子中我使用角度6，材料设计。我的问题是'我有字符串数组'，我必须在多行MatTooltip中显示它。我处理这种情况，它对我有用。这是代码

.mat-tooltip {
  white-space: pre-line;
}

<p matTooltip="{{myArray.join('\n')}}" >...</p>

Answer 4

您可以使用ng-deep设置工具提示样式：

::ng-deep .mat-tooltip  {
    max-width: 60px !important; // for example
}