CSS新手求助：本地ChatGPT聊天机器人响应内容溢出容器问题

问题根源 #

1. 仅用<code>标签展示代码，缺少<pre>标签保留换行与缩进，导致原始响应里的换行被忽略。
2. 用replace(/\n/g, '<br>')转换换行的方式破坏了代码结构，还会让highlight.js无法正确识别代码格式。
3. word-break: break-all强制打断所有字符，对代码展示不友好，反而容易导致布局混乱。

具体修改步骤 #

1. 调整CSS样式，适配代码块展示

替换原有code样式，改用pre+code组合实现更合理的代码展示：

/* 定义pre容器样式，适配代码展示 */
pre {
    background-color: #ddd;
    color: #333;
    font-family: monospace;
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    overflow-x: auto; /* 长代码行横向滚动，不破坏容器布局 */
    /* 若需要自动换行，替换overflow-x为以下两行：
    white-space: pre-wrap;
    word-wrap: break-word;
    */
}

code {
    font-family: inherit; /* 继承pre的字体设置 */
}

/* 仅给用户的普通文本消息设置自动换行，不干扰代码块 */
#chat-history p {
    word-break: break-all;
}

2. 修复JavaScript的响应处理逻辑

移除换行转<br>的操作，改用<pre><code>包裹响应内容，同时手动触发动态代码的高亮：

success: function(response) {
    // 保留原始响应的换行与格式
    var formattedResponse = '<pre><code>' + response + '</code></pre>';
    $('#chat-history').append(formattedResponse);
    $('#user-input').val('');
    // 动态添加的代码需要手动调用高亮
    hljs.highlightAll();
}

3. 清理冗余样式

移除#chat-container和#chat-history上的word-break: break-all，避免干扰代码块的正常展示：

#chat-container {
    width: 60%;
    height: 100%;
    overflow-y: scroll;
    padding: 20px;
    /* 移除 word-break: break-all; */
}

#chat-history {
    /* 移除 word-break: break-all; */
}

修改后，代码响应会保留原始格式，长代码行要么横向滚动（更符合代码阅读习惯），要么自动换行，不会再超出容器边界。

内容的提问来源于stack exchange，提问作者Serge de Gosson de Varennes