172 lines
4.1 KiB
CSS
172 lines
4.1 KiB
CSS
|
/* ===== 文本换行修复 ===== */
|
|||
|
|
|
|||
|
|
/* 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;
|
|||
|
|
}
|