能否为Angular Ngx-chart中内容超10行的Toast消息设置滚动？

要让Ngx-charts的Toast消息在内容超过10行时显示滚动条，只需通过自定义CSS样式控制消息容器的高度与溢出行为即可，具体步骤如下：

• 定位Toast内容容器的CSS类
  打开浏览器开发者工具，查看Toast消息的DOM结构，通常内容容器的类名为.ngx-charts-toast__content。

• 编写样式实现滚动效果
  根据行高计算10行内容的高度，设置容器的最大高度，超出后自动显示垂直滚动条：

  1. 全局样式（适用于整个项目的Toast）
     在项目根目录的styles.scss（或styles.css）中添加：

     .ngx-charts-toast__content {
       line-height: 1.5; /* 统一行高，确保行数计算准确 */
       max-height: 15em; /* 1.5em * 10行 = 15em */
       overflow-y: auto; /* 内容超出时显示垂直滚动条 */
     }
     

  2. 组件内样式（仅作用于当前组件的Toast）
     如果只想在特定组件中生效，在组件的样式文件中使用::ng-deep穿透组件样式隔离：

     ::ng-deep .ngx-charts-toast__content {
       line-height: 1.5;
       max-height: 15em;
       overflow-y: auto;
     }
     

• 调整适配
  如果实际行高与示例不同，只需修改line-height的值，再对应调整max-height为line-height值 * 10即可。若开发者工具中查到的容器类名不是.ngx-charts-toast__content，替换为实际类名即可。

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