/** * 强制文本换行处理 * 解决列表项中文本不换行的问题 */ (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(); })();