长文本换行显示异常求助：word-break/overflow-wrap均无效

1. 先排查后端返回的数据格式 #

如果后端返回的data是数组（长文本被拆分成了多个元素），直接插入会导致内容分散成多个块。先在回调里验证数据类型：

.done(function (data) {
  console.log(typeof data, data); // 查看是字符串还是数组
  // 若为数组，拼接成单个字符串
  if (Array.isArray(data)) {
    data = data.join(' '); // 用空格拼接，或用\n保留换行
  }
  // 后续HTML拼接逻辑不变
})

2. 确保CSS样式正确生效 #

以下样式可强制文本在容器内换行，需直接作用到消息内容标签：

.outgoing-chats-msg-p, .received-msg-inbox-p {
  max-width: 70%; /* 限制容器宽度，触发换行 */
  display: inline-block; /* 让宽度限制生效 */
  white-space: pre-wrap; /* 保留原始换行，同时自动换行 */
  word-break: break-word; /* 长单词强制拆分换行 */
  overflow-wrap: break-word;
}

注意：检查父元素是否设置了white-space: nowrap，该属性会覆盖子元素的换行规则，需移除。

3. 优化前端DOM创建逻辑 #

避免转义字符可能带来的问题，直接创建DOM元素插入：

.done(function (data) {
  // 处理数组格式的返回数据
  if (Array.isArray(data)) {
    data = data.join('\n');
  }
  // 直接构建DOM元素
  const msgP = $('<p class="outgoing-chats-msg"></p>');
  const msgSpan = $('<span class="outgoing-chats-msg-p"></span>').text(data);
  msgP.append(msgSpan);
  $('.msg-page').append(msgP);
})

使用.text()插入内容会自动转义特殊字符，保证文本完整性。

4. 处理HTML实体转义问题 #

如果后端返回的文本包含HTML实体（如 ），需先解码再插入：

function decodeHtml(html) {
  const txt = document.createElement("textarea");
  txt.innerHTML = html;
  return txt.value;
}

// 在回调中调用
data = decodeHtml(data);

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