Question

因此，概述用例：从后端服务中，我收到了一系列对象，这些对象我使用ngFor分解并使用显示。我在此卡上附加了一个工具提示，以显示有关该物品的信息。每个项目的信息都是元素列表。对于工具提示，我将列表发送给函数，并使用'\ r \ n'字符将列表中的项目连接在一起，但是工具提示根本不读取字符，仅在工具提示中显示连续的字符串

<div *ngFor="let item of itemList; ">
 <mat-card matTooltip="{{getDesc(item)}}">
    <span class="card-title" style="font-size: 12px">
      {{ item.itemName }}
    </span>
 </mat-card>
</div>

toolTip描述功能：

getDesc(item){
  let itemDesc: any;
  if(item.itemDescList !== null)
    itemDesc = item.itemDescList.join('\r\n')
  return itemDesc
}

如何在工具提示中引入这些换行符？

示例数组：['desc 1：一些文本，'desc 2：一些文本，...]这些需要在工具提示中的新行上显示

Answer 1

角度8/9

对于下面的Angular 8/9解决方案（使用::ng-deep）对我有用，

::ng-deep {
 .mat-tooltip-class-here {
  white-space: pre-line;
 }
}

<span    
    matTooltip="First line \n Second line"
    matTooltipClass="mat-tooltip-class-here">
</span>

Answer 2

您可以添加以下CSS

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

.with-pre-line
{
 white-space: pre-line;
 }

<div>
without white-space: pre-line; 
some text with spaces
and 
newlines
<div>




<div class="with-pre-line">
with white-space: pre-line;
some text with spaces
and 
newlines only breaks
on newlines
<div>

Answer 3

使用<br />。

要将HTML插入带有Angular的标签中，请使用：<span class="card-title" style="font-size: 12px" [innerHTML]="item.itemName"></span>

Answer 4

此post中已经回答了。

首先，创建一个将添加white-space: pre-line样式的类：

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

然后使用输入matTooltipClass添加类，并在要拆分的部分之间添加换行符：

<mat-card    
    matTooltip="One line&#13;Two lines"
    matTooltipClass="line-broken-tooltip">
</mat-card>

此CSS属性也适用于模板字符串：

this.tooltipText = `
  This value has been updated.
  Confidence: ${this.confidence}
`

Angular Tooltip无法识别'\ r'或'\ n'字符

4 个答案: