如何在Dash AG Grid自定义提示框中显示换行符

要让自定义提示框中的\n换行符正常生效，有两种简单的解决方式：

方法1：将换行符替换为HTML换行标签 #

在自定义Tooltip的JS代码中，把包含换行符的文本按\n拆分，逐行生成元素并插入<br>标签：

修改后的JS代码：

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.CustomTooltip = function (props) {
    // 处理company字段的换行符
    const companyLines = props.data.company ? props.data.company.split('\n').map((line, idx) => 
        React.createElement(React.Fragment, {key: idx}, line, React.createElement('br'))
    ) : '';
    
    const info = [
        React.createElement('h5', {}, props.data.ticker),
        companyLines,
        React.createElement('div', {}, props.data.price),
    ];
    return React.createElement(
        'div',
        {
            style: {
                border: '2pt solid white',
                backgroundColor: props.color || 'grey',
                padding: 10,
            },
        },
        info
    );
};

方法2：通过CSS样式保留换行 #

给显示文本的元素添加white-space: pre-line样式，浏览器会自动识别\n为换行：

修改后的JS代码：

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.CustomTooltip = function (props) {
    const info = [
        React.createElement('h5', {}, props.data.ticker),
        React.createElement('div', {style: {whiteSpace: 'pre-line'}}, props.data.company),
        React.createElement('div', {}, props.data.price),
    ];
    return React.createElement(
        'div',
        {
            style: {
                border: '2pt solid white',
                backgroundColor: props.color || 'grey',
                padding: 10,
            },
        },
        info
    );
};

说明 #

• 方法1适合需要对每行文本单独处理的场景，比如添加样式或逻辑判断；
• 方法2更简洁，适合只需要简单换行的情况，同时会自动合并连续空格，排版更美观。

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