155 lines
4.5 KiB
JavaScript
155 lines
4.5 KiB
JavaScript
/**
|
||
* 强制文本换行处理
|
||
* 解决列表项中文本不换行的问题
|
||
*/
|
||
|
||
(function() {
|
||
'use strict';
|
||
|
||
/**
|
||
* 处理列表项的换行
|
||
*/
|
||
function processListItems() {
|
||
// 获取所有消息中的列表项
|
||
const listItems = document.querySelectorAll(
|
||
'.ai-message li, .user-message li, .message li, #chatMessages li'
|
||
);
|
||
|
||
listItems.forEach(li => {
|
||
// 获取列表项的计算样式
|
||
const computedStyle = window.getComputedStyle(li);
|
||
const parentWidth = li.parentElement.offsetWidth;
|
||
|
||
// 如果列表项内容超出父容器宽度，强制设置样式
|
||
if (li.scrollWidth > parentWidth) {
|
||
li.style.wordBreak = 'break-all';
|
||
li.style.overflowWrap = 'anywhere';
|
||
li.style.whiteSpace = 'normal';
|
||
li.style.maxWidth = '100%';
|
||
}
|
||
|
||
// 处理列表项中的所有文本节点
|
||
const walker = document.createTreeWalker(
|
||
li,
|
||
NodeFilter.SHOW_TEXT,
|
||
null,
|
||
false
|
||
);
|
||
|
||
let textNode;
|
||
while (textNode = walker.nextNode()) {
|
||
const text = textNode.textContent;
|
||
// 检查是否包含长连续字符串（超过30个字符没有空格）
|
||
if (text && /\S{30,}/.test(text)) {
|
||
// 在长字符串中插入零宽空格以允许换行
|
||
const newText = text.replace(/(\S{20})/g, '$1\u200B');
|
||
if (newText !== text) {
|
||
textNode.textContent = newText;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 设置全局样式
|
||
*/
|
||
function setGlobalStyles() {
|
||
// 检查是否已经添加了样式
|
||
if (document.getElementById('force-wrap-styles')) {
|
||
return;
|
||
}
|
||
|
||
// 创建style元素
|
||
const style = document.createElement('style');
|
||
style.id = 'force-wrap-styles';
|
||
style.textContent = `
|
||
/* 强制列表项换行 */
|
||
.ai-message li,
|
||
.user-message li,
|
||
.message li,
|
||
#chatMessages li {
|
||
word-break: break-all !important;
|
||
overflow-wrap: anywhere !important;
|
||
white-space: normal !important;
|
||
max-width: 100% !important;
|
||
line-break: anywhere !important;
|
||
}
|
||
|
||
/* 列表容器设置 */
|
||
.ai-message ul,
|
||
.ai-message ol,
|
||
.user-message ul,
|
||
.user-message ol,
|
||
.message ul,
|
||
.message ol,
|
||
#chatMessages ul,
|
||
#chatMessages ol {
|
||
max-width: 100% !important;
|
||
width: 100% !important;
|
||
}
|
||
`;
|
||
|
||
// 添加到head
|
||
document.head.appendChild(style);
|
||
}
|
||
|
||
/**
|
||
* 监听DOM变化
|
||
*/
|
||
function setupObserver() {
|
||
const chatContainer = document.getElementById('chatMessages');
|
||
if (!chatContainer) {
|
||
setTimeout(setupObserver, 500);
|
||
return;
|
||
}
|
||
|
||
// 创建观察器
|
||
const observer = new MutationObserver((mutations) => {
|
||
// 当有新消息添加时处理
|
||
let hasNewMessages = false;
|
||
mutations.forEach((mutation) => {
|
||
if (mutation.addedNodes.length > 0) {
|
||
hasNewMessages = true;
|
||
}
|
||
});
|
||
|
||
if (hasNewMessages) {
|
||
// 延迟处理，等待渲染完成
|
||
setTimeout(processListItems, 100);
|
||
}
|
||
});
|
||
|
||
// 开始观察
|
||
observer.observe(chatContainer, {
|
||
childList: true,
|
||
subtree: true
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 初始化
|
||
*/
|
||
function init() {
|
||
// 设置全局样式
|
||
setGlobalStyles();
|
||
|
||
// DOM加载完成后执行
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
processListItems();
|
||
setupObserver();
|
||
});
|
||
} else {
|
||
processListItems();
|
||
setupObserver();
|
||
}
|
||
|
||
// 定期检查（后备方案）
|
||
setInterval(processListItems, 3000);
|
||
}
|
||
|
||
// 启动
|
||
init();
|
||
|
||
})(); |