仅在角材提示在第一线应用样式

Question

我用我的项目角材料提示。我想插入到工具提示更多的1句话，我想大胆的造型加起来也只有第一行。

我的HTML代码：

 <div fxFlex="100" *ngFor="let data of slider_data" fxLayoutAlign="center" [matTooltip]="slider_data.onHover" matTooltipClass="tooltip">
     <div class="animation-container" fxLayoutGap="10px" fxLayoutAlign="center center">
        <div class="slider-font">{{data.value.toFixed(1)}}%</div>
    </div>
 </div>

我的TS码：

slider_data: Array<object> = [
    {
      name: "sold items",
      rate: "32,560",
      value: 0.8,
      onHover: "this is first sentence\n this is the second sentence\n this is the third sentence\n",
    },
    {...}
]

我怎样才能做到这一点 ？

Answer 1

首先，在你的HTML模板，我认为你的意思，而不是[matTooltip]="data.onHover"的[matTooltip]="slider_data.onHover"

关于自定义提示，以下角材料example，并添加一些额外的CSS，你可以做到这一点的：

更改视图封装首屈一指：

import { ViewEncapsulation } from '@angular/core';
@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

更改提示里面是如何空格处理：

.tooltip {
  white-space: pre;
}

做任何格式化你需要在第一行用css ::first-line选择：

.tooltip::first-line {
  font-weight: bold;
}