如何为动态绑定的tooltip添加换行并设置max-width宽度限制

结论先行 #

原生浏览器的title属性提示框由浏览器内核控制渲染，不支持直接通过CSS设置max-width自定义换行规则，你可以通过以下两种方案解决动态文本超长的问题：

方案1：继续使用原生title，手动插入换行符 #

原生title仅会识别文本中的\n换行符进行折行，你可以通过Angular管道对动态绑定的ngModel值做预处理，按固定长度自动插入换行符：

1. 新建一个文本换行管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'titleLineBreak' })
export class TitleLineBreakPipe implements PipeTransform {
  // maxLength可自定义，中文建议设15-20，英文建议设30-40
  transform(value: string, maxLength: number = 20): string {
    if (!value) return '';
    // 按固定长度切割文本，用\n拼接
    return value.match(new RegExp(`.{1,${maxLength}}`, 'g'))?.join('\n') || value;
  }
}

2. 修改title绑定逻辑，引入管道处理

<div [title]="yourTextareaModel | titleLineBreak:20">
  绑定提示的元素
</div>

方案2：使用自定义Tooltip组件，灵活控制样式 #

如果需要更自由的样式调整（自定义max-width、背景色、边距等），建议放弃原生title，改用Angular生态的自定义Tooltip组件（比如Angular Material的MatTooltip、NG-ZORRO的nz-tooltip，也可以自己实现简易Tooltip），这类组件完全支持自定义CSS样式：
以Angular Material的MatTooltip为例，绑定逻辑和你现有写法几乎一致：

<div [matTooltip]="yourTextareaModel">
  绑定提示的元素
</div>

添加CSS配置强制换行：

/* 全局样式文件中添加 */
.mat-tooltip {
  max-width: 200px !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

这个方案支持自动识别用户在textarea中输入的原始换行，同时超出max-width的文本会自动强制折行，适配性更强。

内容的提问来源于stack exchange，提问作者Sixteen