Mattooltip:如何使框适合文本?

时间:2019-05-03 15:59:33

标签: css angular tooltip

我有此文本想要显示为工具提示。没有样式(只是字体大小定义为16px),它看起来像这样:

enter image description here

我真正想要的是将文本显示在一行中-因此我将空白设置为css中的pre:

::ng-deep .mat-tooltip {
  font-size: 16px;
  white-space: pre;
}

但是现在文本超出了工具提示框的范围:

enter image description here

我尝试将width设置为更高的px值,但是什么也没做。

有没有一种方法可以使框适合文本?

[编辑-添加了注释中指出的缺失示例] stackblitz link
我将宽度设置为400px,示例中的文本不会离开框,而是被缩写,而不是使框适合整个文本。

1 个答案:

答案 0 :(得分:1)

只需将最大宽度设置为unset。为此,请如下定义全局CSS类:

.my-custom-tooltip {
  max-width: unset !important;
}

然后将类名传递给工具提示:

<button mat-raised-button
        matTooltip="This Infotext is displayed one line if possible. Just a little more text for demo!"
        matTooltipClass="my-custom-tooltip">
  Action
</button>

也如@rinktacular所述,请尽量不要使用ng::deep

正在工作的Stackblitz示例:https://stackblitz.com/edit/angular-qkh4cl