129 lines
2.9 KiB
CSS
129 lines
2.9 KiB
CSS
|
/* ===== 消息宽度和换行修复 ===== */
|
||
|
|
|
||
|
|
/* 1. 设置消息容器的最大宽度 */
|
||
|
|
.message,
|
||
|
|
.message-item,
|
||
|
|
.ai-message,
|
||
|
|
.user-message {
|
||
|
|
max-width: 100% !important;
|
||
|
|
width: 100% !important;
|
||
|
|
box-sizing: border-box !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 2. 确保消息内容不会溢出 */
|
||
|
|
.message-content,
|
||
|
|
.message-item > div,
|
||
|
|
.ai-message > div,
|
||
|
|
.user-message > div {
|
||
|
|
max-width: 100% !important;
|
||
|
|
box-sizing: border-box !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 3. 列表容器宽度设置 */
|
||
|
|
.message ul,
|
||
|
|
.message ol,
|
||
|
|
.ai-message ul,
|
||
|
|
.ai-message ol,
|
||
|
|
.user-message ul,
|
||
|
|
.user-message ol {
|
||
|
|
max-width: calc(100% - 1.2em) !important; /* 减去列表缩进 */
|
||
|
|
width: auto !important;
|
||
|
|
box-sizing: border-box !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 4. 列表项强制换行 */
|
||
|
|
.message li,
|
||
|
|
.ai-message li,
|
||
|
|
.user-message li {
|
||
|
|
max-width: 100% !important;
|
||
|
|
white-space: pre-wrap !important; /* 保留空格但允许换行 */
|
||
|
|
word-wrap: break-word !important;
|
||
|
|
word-break: break-word !important;
|
||
|
|
overflow-wrap: anywhere !important; /* 最激进的换行策略 */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 5. 处理列表项中的文本节点 - 直接子文本 */
|
||
|
|
.message li,
|
||
|
|
.ai-message li,
|
||
|
|
.user-message li {
|
||
|
|
/* 针对中文的换行 */
|
||
|
|
word-break: break-all !important;
|
||
|
|
line-break: anywhere !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 6. 确保父容器有正确的宽度 */
|
||
|
|
#chatMessages {
|
||
|
|
width: 100% !important;
|
||
|
|
max-width: 100% !important;
|
||
|
|
box-sizing: border-box !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 7. 处理可能的flex容器 */
|
||
|
|
.message-item {
|
||
|
|
display: block !important;
|
||
|
|
width: 100% !important;
|
||
|
|
max-width: 100% !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 8. 移除可能阻止换行的white-space设置 */
|
||
|
|
.message *,
|
||
|
|
.ai-message *,
|
||
|
|
.user-message * {
|
||
|
|
white-space: normal !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 9. 特别处理列表项的文本内容 */
|
||
|
|
.message li::first-line,
|
||
|
|
.ai-message li::first-line,
|
||
|
|
.user-message li::first-line {
|
||
|
|
word-break: break-all !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 10. 使用CSS3的换行属性 */
|
||
|
|
.message li,
|
||
|
|
.ai-message li,
|
||
|
|
.user-message li {
|
||
|
|
-webkit-line-break: auto !important;
|
||
|
|
-ms-word-break: break-all !important;
|
||
|
|
word-break: break-all !important;
|
||
|
|
-webkit-hyphens: auto !important;
|
||
|
|
-moz-hyphens: auto !important;
|
||
|
|
hyphens: auto !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 11. 强制设置列表项的显示属性 */
|
||
|
|
.message li,
|
||
|
|
.ai-message li,
|
||
|
|
.user-message li {
|
||
|
|
display: list-item !important;
|
||
|
|
unicode-bidi: plaintext !important;
|
||
|
|
text-align: start !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 12. 处理列表项内的所有元素 */
|
||
|
|
.message li *,
|
||
|
|
.ai-message li *,
|
||
|
|
.user-message li * {
|
||
|
|
max-width: 100% !important;
|
||
|
|
word-break: break-word !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 13. 最高优先级覆盖 */
|
||
|
|
body .message li,
|
||
|
|
body .ai-message li,
|
||
|
|
body .user-message li,
|
||
|
|
body #chatMessages li {
|
||
|
|
white-space: normal !important;
|
||
|
|
word-break: break-all !important;
|
||
|
|
overflow-wrap: anywhere !important;
|
||
|
|
max-width: 100% !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 14. 调试：临时添加边框查看元素边界 */
|
||
|
|
/*
|
||
|
|
.message li,
|
||
|
|
.ai-message li,
|
||
|
|
.user-message li {
|
||
|
|
border: 1px solid red !important;
|
||
|
|
}
|
||
|
|
*/
|