Html 如何截断长字符串并在以角度悬停时为整个字符串添加工具提示

我有一个mat表，其中列值有一个长字符串值，这占用了大量的水平空间。我想将字符串截断到一个极限，让用户将鼠标悬停在上面，然后查看完整的字符串

用于限制html中字符串值的关键字是什么

我试着设置一个管道限制，但这对我不起作用

有人能帮忙吗

---

PS-我编辑了这个问题，因为之前的“限制管道”对工具提示部分不起作用：如果集成了角度材质，可以使用

就这样,

<p [matTooltip]="text">{{text | limit : 40}}</p>

{{{text | limit:40}

您可以尝试

切片

而不是

限制

。像这样：

<button mat-raised-button [matTooltip]="Data">
  {{Data | slice:0:40 }}
</button>

{{数据|切片：0:40}

您可以尝试自己的管道

import {Pipe, PipeTransform} from '@angular/core';
 
@Pipe({
    name: 'truncate'
})
export class TruncatePipe implements PipeTransform {

    /**
     * Transform the specified value
     * If the value is not specified, it is returned ''
     * If the size of the string is greater than the limit, it returns a substring of the desired size
     * If the size of the string is less than the limit, it returns the original string
     * @param value
     * @param size
     */
    transform(value: string, size: number = 10): string {
        if (!value) {
            return '';
        }
        const limit = size > 0 ? size : 10;
        return value.length > limit ? value.substring(0, limit) + '...' : value;
    }
}

并使用这种方式在工具提示中显示全文，并截断html文本上的值

<label [matTooltip]="descripcion ">{{descripcion  | truncate:50}}</label>

{{description|truncate:50}

最简单的方法，

{{text | limit:40}

但我不确定这是否正是您想要的，所以将其作为注释保留。是的，类似的东西，但这个管道限制在angular mat表单元格中不起作用。搜索限制和工具提示的替代方案。编辑了问题@chrisAh oh，这解释了更多。我不想限制，我想你只是想应用省略号，除非有特定的原因进行限制。不，省略号不是我的目标，我只是想截断我的表列中的任何长字符串，并将其显示为工具提示。但正如我在问题中提到的，限制本身在控制台中显示了一个错误。哦，是的，thx。我编辑了代码你在哪里更改了@Tino？这是对chris关于我代码示例中的一个输入错误的另一个评论的回答