ngbTooltip设置固定宽度后内容无法完整显示求助

问题场景 #

在Angular项目中使用ng-bootstrap v4.2.1的ngbTooltip，为长文本内容设置800px宽度后，工具提示仅显示填满800px的前几个词，调整white-space、word-wrap等CSS属性后仍未解决。

解决方案 #

1. 突破Angular样式隔离限制

Angular组件样式默认无法渗透到第三方组件（如ng-bootstrap的tooltip容器），需通过::ng-deep强制样式生效：

:host ::ng-deep .description .tooltip-inner {
    margin-top: 4px;
    width: 800px;
    max-width: 800px; /* 限制最大宽度，避免内容溢出 */
    word-wrap: break-word;
    word-break: break-all; /* 处理超长单词强制换行 */
    text-align: left;
    white-space: pre-line; /* 保留文本原有换行，同时自动折行 */
}

2. 修正内容绑定格式

原HTML中ngbTooltip绑定存在多余空格，可能导致解析异常，修改为：

<button type="button" placement="bottom" ngbTooltip="{{Description}}" tooltipClass="description" style="padding: 0; font-size: 1.2em; margin: 0; border: none; background-color: transparent;">
    <i class="fal fa-info-circle" style="color: #757575;"></i>
</button>

3. 适配文本内容格式

• 若Description包含换行符，white-space: pre-line会正确识别并展示换行；
• 若为无换行的连续长文本，可改用white-space: normal配合word-break: break-all实现强制折行。

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