Files
AIEC-new/AIEC-server/css/text-wrap-fix.css
2025-10-17 09:31:28 +08:00

172 lines
4.1 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* ===== 文本换行修复 ===== */
/* 1. 确保所有消息内容正确换行 */
.message,
.message-item,
.ai-message,
.user-message,
.message-content,
#chatMessages {
word-wrap: break-word !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
/* 2. 确保段落正确换行但不改变显示类型 */
.message p,
.ai-message p,
.user-message p,
#chatMessages p {
word-wrap: break-word !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
/* 3. 特别处理列表项内的文本 */
.message li,
.ai-message li,
.user-message li,
#chatMessages li {
word-wrap: break-word !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
/* 4. 处理列表项内的所有子元素 */
.message li > *,
.ai-message li > *,
.user-message li > *,
#chatMessages li > * {
word-wrap: break-word !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
/* 5. 强制处理内联元素 */
.message strong,
.message em,
.message code:not(pre code),
.ai-message strong,
.ai-message em,
.ai-message code:not(pre code),
.user-message strong,
.user-message em,
.user-message code:not(pre code),
#chatMessages strong,
#chatMessages em,
#chatMessages code:not(pre code) {
word-wrap: break-word !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
display: inline !important;
}
/* 6. 处理中文文本的特殊换行 */
.message:lang(zh),
.message:lang(zh-CN),
.ai-message:lang(zh),
.ai-message:lang(zh-CN),
.user-message:lang(zh),
.user-message:lang(zh-CN),
#chatMessages:lang(zh),
#chatMessages:lang(zh-CN) {
word-break: normal !important;
line-break: normal !important;
}
/* 7. 处理混合中英文内容 - 使用更温和的换行策略 */
.message li,
.ai-message li,
.user-message li,
#chatMessages li {
/* 正常换行策略 */
line-break: normal !important;
/* 保持单词完整性,但必要时可断开 */
word-break: normal !important;
/* 确保长单词能够换行 */
overflow-wrap: break-word !important;
}
/* 8. 修复列表项内的换行问题 */
.message li,
.ai-message li,
.user-message li,
#chatMessages li {
/* 确保列表项内容不会溢出 */
max-width: 100% !important;
box-sizing: border-box !important;
}
/* 9. 处理列表项中的强调文本 */
.message li strong,
.message li em,
.message li b,
.ai-message li strong,
.ai-message li em,
.ai-message li b,
.user-message li strong,
.user-message li em,
.user-message li b,
#chatMessages li strong,
#chatMessages li em,
#chatMessages li b {
/* 保持内联但允许换行 */
display: inline !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
/* 10. 确保列表项目符号后的文本正确换行 */
.message ul li::marker,
.message ol li::marker,
.ai-message ul li::marker,
.ai-message ol li::marker,
.user-message ul li::marker,
.user-message ol li::marker,
#chatMessages ul li::marker,
#chatMessages ol li::marker {
/* 保持列表符号不换行 */
white-space: nowrap !important;
}
/* 11. 代码块保持原样 */
.message pre,
.ai-message pre,
.user-message pre,
#chatMessages pre {
white-space: pre !important;
overflow-x: auto !important;
}
.message pre code,
.ai-message pre code,
.user-message pre code,
#chatMessages pre code {
white-space: pre !important;
word-break: normal !important;
}
/* 12. 最高优先级 - 使用ID和body选择器 */
body #chatMessages .message li,
body #chatMessages .ai-message li,
body #chatMessages .user-message li {
word-wrap: break-word !important;
word-break: normal !important;
overflow-wrap: break-word !important;
white-space: normal !important;
line-break: normal !important;
}
/* 13. 处理长连续字符串如URL */
.message a,
.ai-message a,
.user-message a,
#chatMessages a {
word-break: break-all !important;
overflow-wrap: anywhere !important;
}