角2材质垫 [英] angular 2 material matTooltip multiline

问题描述

我是Angular 2 Material的新手.使工具提示多行显示的首选方法是什么?

I'm new to Angular 2 Material. What's the preferred way to make a tool tip multi-line?

例如，我可能有以下工具提示:

For example, I might have the following tool tip:

AA BBBBBBBBBB CCCC DDDDD

而且，我可能希望以多行格式显示它:

And, I may want to to have it display in a multi-line format like this:

AA BBBBBBBBBB 
CCCC 
DDDDD

推荐答案

首先，为您的工具提示创建一个类，以使其在换行符处换行.

First, create a class for your tooltip, to make it break lines on line breaks.

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

然后，将该类添加到您的工具提示中，并以代码


Then, add the class to your tooltip and the line breaks with its code 


<span 
    matTooltip="First line&#13;Second line"
    [matTooltipClass]="'my-tooltip'">
</span>

这篇关于角2材质垫的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！