不能做多行matTooltip，总是得到单行
使用matTooltip="myMultiLineStringGenerator()“与matTooltipClass=”my- tooltip“相结合，我期望给我多行工具提示，不管我是谁，只要我得到一个线性工具提示，我就无法控制何时行结束并移动到下一行。
复制步骤
HTML部件
<p [matTooltipClass]="'my-tooltip'"
[matTooltip]="getTooltopScript(nearestStations)">
Hello World!
</p>CSS部分：
.mat-tooltip {
white-space: pre-line;
}
::ng-deep .mat-tooltip {
white-space: pre-line;
}TypeScript
getTooltopScript(ns: any[]]){
let part1 = ns[0]['stationName'] ;
let part2 = ns[0]['regionName'];
return `${part1}.\r\n\
${part2}.`;
}我读过很多其他堆栈流，所有这些流的结尾都是使用空格: css中的预行和js\type脚本中的\r\n来创建字符串。我不知道我还能做些什么
(请帮助:)
从其他堆栈流中更新CSS，以及下面的第一个注释。我还是没有结果
::ng-deep .mat-tooltip .cdk-overlay-container, ::ng-deep .mat-tooltip .cdk-
global-overlay-wrapper {
white-space: pre-line;
}回答 2
Stack Overflow用户
发布于 2020-03-29 02:50:44
如果您的文本来自ts文件，请找到以下解决方案：
在.ts文件中：
getTooltopScript(){
return 'Multiline Tooltip \n This is second line';
}在HTML中：
<p #tooltip2="matTooltip" [matTooltip]="getTooltopScript()">Hello World!</p>在css文件中：
::ng-deep .cdk-overlay-container, .cdk-global-overlay-wrapper {
white-space: pre-line;
}为了正确查看工具提示，我们需要在全局样式表(即style.css)中添加材料样式导入：
在style.css中：
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';请参阅下面的工作实例：
https://angular-sf-tooltip-issue-fix.stackblitz.io
https://stackblitz.com/edit/angular-sf-tooltip-issue-fix?file=src%2Fapp%2Fapp.module.ts
Stack Overflow用户
发布于 2020-03-28 20:24:55
为此，我们需要重写..cdk overlay-容器的样式，..cdk全局覆盖包装器
::ng-deep .cdk-overlay-container, .cdk-global-overlay-wrapper {
white-space: pre-line;
}在HTML中：
<p matTooltip="Multiline Tooltip This is second line">Hello World!</p>希望这能帮你解决问题。请参阅下面的工作实例：
https://angular-sf-tooltip-issue-fix.stackblitz.io
https://stackblitz.com/edit/angular-sf-tooltip-issue-fix?file=src%2Fapp%2Fapp.module.ts
https://stackoverflow.com/questions/60906153
复制相似问题
腾讯云开发者
