mat-table 单元格上的多行 mat-tooltip 不起作用答案

【问题标题】：Multiline mat-tooltip on mat-table cell is not workingmat-table 单元格上的多行 mat-tooltip 不起作用
【发布时间】：2021-04-09 11:42:31
【问题描述】：

我在全局 css 中将 mat-tooltip 设置为具有以下样式的多行。

 .mat-tooltip-class-here {
  white-space: pre-line !important;
 }

这适用于 span 和 button，但不适用于 mat cell。

查看跨度（工作中）：

查看按钮（工作）：

查看表格单元格（不工作）：

不确定是什么问题。我在这里创建了 stackblitz：https://stackblitz.com/edit/angular-4mtwsw

【问题讨论】：

标签： css angular tooltip mat-table

【解决方案1】：

换行符不一致。

对于按钮和跨度&#13; 用作新行，但对于表格单元格，我们可能需要使用\r\n 或\n。

IDK 确切的原因，但它现在工作。需要注意的一点是，任何弹出框样式都需要在全局 css 级别应用，因为它直接在正文中呈现。

【讨论】：

【解决方案2】：

使用 mat-tooltip 时 mat table 存在问题，但有解决此问题的方法。不要在 td 上添加工具提示，而是插入 div 或 span 元素并应用相同的元素。

<td mat-cell *matCellDef="let row">
      <span [matTooltip]="row.title" matTooltipPosition="below"> {{ (row.title && row.title?.length > 20) ? ((row.title).slice(0, 20) + '...') : row.title }}</span>
</td>

注意 - 此解决方法无法完全发挥作用，但这会在一定程度上修复工具提示的位置。

【讨论】：