147 lines
3.7 KiB
CSS
147 lines
3.7 KiB
CSS
|
/* ===== 列表项文本换行修复 ===== */
|
||
|
|
|
||
|
|
/* 1. 确保列表项本身可以正确换行 */
|
||
|
|
.message li,
|
||
|
|
.ai-message li,
|
||
|
|
.user-message li,
|
||
|
|
.message-item li,
|
||
|
|
#chatMessages li {
|
||
|
|
/* 保持列表项显示 */
|
||
|
|
display: list-item !important;
|
||
|
|
/* 确保文本可以换行 */
|
||
|
|
white-space: normal !important;
|
||
|
|
word-wrap: break-word !important;
|
||
|
|
overflow-wrap: break-word !important;
|
||
|
|
/* 保持适当的行高 */
|
||
|
|
line-height: 1.5 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 2. 列表容器设置 */
|
||
|
|
.message ul,
|
||
|
|
.message ol,
|
||
|
|
.ai-message ul,
|
||
|
|
.ai-message ol,
|
||
|
|
.user-message ul,
|
||
|
|
.user-message ol,
|
||
|
|
#chatMessages ul,
|
||
|
|
#chatMessages ol {
|
||
|
|
/* 确保列表容器宽度正确 */
|
||
|
|
width: 100% !important;
|
||
|
|
max-width: 100% !important;
|
||
|
|
box-sizing: border-box !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 3. 处理列表项中的文本节点 */
|
||
|
|
.message li,
|
||
|
|
.ai-message li,
|
||
|
|
.user-message li,
|
||
|
|
#chatMessages li {
|
||
|
|
/* 使用CSS3的换行属性 */
|
||
|
|
word-break: keep-all !important; /* 保持单词完整 */
|
||
|
|
word-wrap: break-word !important; /* 长单词换行 */
|
||
|
|
overflow-wrap: break-word !important; /* 确保换行 */
|
||
|
|
hyphens: auto !important; /* 自动断字 */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 4. 中文内容特殊处理 */
|
||
|
|
.message li:lang(zh),
|
||
|
|
.message li:lang(zh-CN),
|
||
|
|
.ai-message li:lang(zh),
|
||
|
|
.ai-message li:lang(zh-CN),
|
||
|
|
.user-message li:lang(zh),
|
||
|
|
.user-message li:lang(zh-CN),
|
||
|
|
#chatMessages li:lang(zh),
|
||
|
|
#chatMessages li:lang(zh-CN) {
|
||
|
|
/* 中文可以在任意字符间换行 */
|
||
|
|
word-break: break-all !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 5. 处理列表项内的inline元素 */
|
||
|
|
.message li strong,
|
||
|
|
.message li em,
|
||
|
|
.message li span,
|
||
|
|
.message li b,
|
||
|
|
.ai-message li strong,
|
||
|
|
.ai-message li em,
|
||
|
|
.ai-message li span,
|
||
|
|
.ai-message li b,
|
||
|
|
.user-message li strong,
|
||
|
|
.user-message li em,
|
||
|
|
.user-message li span,
|
||
|
|
.user-message li b,
|
||
|
|
#chatMessages li strong,
|
||
|
|
#chatMessages li em,
|
||
|
|
#chatMessages li span,
|
||
|
|
#chatMessages li b {
|
||
|
|
/* 保持内联但允许换行 */
|
||
|
|
display: inline !important;
|
||
|
|
word-break: inherit !important;
|
||
|
|
word-wrap: inherit !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 6. 列表项内的段落处理 */
|
||
|
|
.message li p,
|
||
|
|
.ai-message li p,
|
||
|
|
.user-message li p,
|
||
|
|
#chatMessages li p {
|
||
|
|
/* 段落保持内联以避免额外换行 */
|
||
|
|
display: inline !important;
|
||
|
|
/* 继承父元素的换行设置 */
|
||
|
|
word-break: inherit !important;
|
||
|
|
word-wrap: inherit !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 7. 最高优先级 - 强制列表项正确换行 */
|
||
|
|
body #chatMessages .message li,
|
||
|
|
body #chatMessages .ai-message li,
|
||
|
|
body #chatMessages .user-message li {
|
||
|
|
white-space: normal !important;
|
||
|
|
word-break: break-word !important;
|
||
|
|
overflow-wrap: break-word !important;
|
||
|
|
max-width: 100% !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 8. 修复列表项内容溢出 */
|
||
|
|
.message li,
|
||
|
|
.ai-message li,
|
||
|
|
.user-message li,
|
||
|
|
#chatMessages li {
|
||
|
|
/* 允许内容正常显示 */
|
||
|
|
overflow: visible !important;
|
||
|
|
/* 允许多行 */
|
||
|
|
display: list-item !important;
|
||
|
|
white-space: normal !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 9. 重置可能影响换行的属性 */
|
||
|
|
.message li,
|
||
|
|
.ai-message li,
|
||
|
|
.user-message li,
|
||
|
|
#chatMessages li {
|
||
|
|
/* 移除可能的flex属性 */
|
||
|
|
display: list-item !important;
|
||
|
|
/* 确保文本正常流动 */
|
||
|
|
position: relative !important;
|
||
|
|
/* 移除可能的浮动 */
|
||
|
|
float: none !important;
|
||
|
|
/* 确保宽度自适应 */
|
||
|
|
width: auto !important;
|
||
|
|
max-width: 100% !important;
|
||
|
|
min-width: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 10. 处理特定的换行场景 */
|
||
|
|
.message li,
|
||
|
|
.ai-message li,
|
||
|
|
.user-message li,
|
||
|
|
#chatMessages li {
|
||
|
|
/* 标准换行设置 */
|
||
|
|
overflow-wrap: break-word !important;
|
||
|
|
word-wrap: break-word !important;
|
||
|
|
-webkit-hyphens: auto !important;
|
||
|
|
-moz-hyphens: auto !important;
|
||
|
|
-ms-hyphens: auto !important;
|
||
|
|
hyphens: auto !important;
|
||
|
|
/* 保持文本可读性 */
|
||
|
|
text-align: left !important;
|
||
|
|
}
|