Highcharts tooltip内容出现溢出，未应用外部样式，如何修复该问题？

溢出问题修复方案 #

修改tooltip配置，补充断行、溢出截断属性即可：

tooltip: {
    useHTML: true,
    style: {
        width: '100px',
        whiteSpace: 'normal',
        // 新增如下属性解决溢出
        overflow: 'hidden',
        wordBreak: 'break-all',
        wordWrap: 'break-word',
        textOverflow: 'ellipsis' // 不需要超出显示省略号可删除该行
    },
    borderWidth: 0.5,
    borderColor: '#DEDFE0',
    backgroundColor: '#FFFFFF',
    borderRadius: 1
}

适配补充说明 #

• 如果存在自定义formatter渲染内容的场景，可以在返回的HTML外层套一个固定宽度的div做兜底截断，示例：

  formatter: function() {
    return `<div style="max-width: 90px;overflow:hidden;">${this.point.y} ${this.series.name}</div>`
  }
  

• 如果tooltip内包含图片、固定宽度块元素，需要将元素宽度调整至95px以内，避免撑出容器。

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