模态弹窗展示格式化文本丢失换行问题求解

问题出在纯文本中的换行符（\n或\r\n）在HTML中不会被自动渲染为换行，可通过以下两种方式处理：

方案一：将换行符转换为HTML换行标签 #

把文本中的换行符替换成<br>标签，让浏览器识别为换行：

$('body').on('click', '#aPoppingOutForSomeText', function (evt) {
    evt.preventDefault();
    ShowAdvicePopup();
});

function ShowAdvicePopup() {
    // 替换所有换行符为<br>标签
    var formattedText = $('#txtCOMMENTS').text().replace(/\r?\n/g, '<br>');
    var $divInner = $('<div><table class="fullWidth"><tr><td><span></span></td></tr></table></div>');
    // 用.html()设置处理后的内容
    $divInner.find('span').html(formattedText);
    var $divOuter = $('<div></div>').append($divInner);    
    
    $divOuter.dialog({
        title: 'MDT Comments',
        modal: true,
        width: 900,
        close: function () {
            $(this).dialog('destroy').remove(); // 清理DOM避免内存泄漏
        }
    })
}

方案二：用CSS保留原始格式 #

给文本容器添加white-space: pre-wrap样式，让浏览器自动识别纯文本的换行和空格，同时支持自动换行适配容器宽度：

步骤1：添加CSS样式（可选，也可直接内联） #

.pre-formatted {
    white-space: pre-wrap;
    word-wrap: break-word; /* 长单词自动换行 */
}

步骤2：修改JS代码 #

$('body').on('click', '#aPoppingOutForSomeText', function (evt) {
    evt.preventDefault();
    ShowAdvicePopup();
});

function ShowAdvicePopup() {
    // 给span添加样式类或内联样式
    var $divInner = $('<div><table class="fullWidth"><tr><td><span class="pre-formatted"></span></td></tr></table></div>');
    // 直接设置纯文本内容
    $divInner.find('span').text($('#txtCOMMENTS').text());
    var $divOuter = $('<div></div>').append($divInner);    
    
    $divOuter.dialog({
        title: 'MDT Comments',
        modal: true,
        width: 900,
        close: function () {
            $(this).dialog('destroy').remove();
        }
    })
}

推荐方案二：无需修改文本内容，纯CSS处理更简洁，同时能完整保留原始的换行和空格格式。

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