fix(ai): 修复大文本消息溢出用户气泡

999px 圆角在盒子尺寸不足时会被按比例夹到短边一半;单行气泡仍是胶囊,多行大文本则变成巨大椭圆,矩形文字区漏出白底。用户气泡改为 24px 圆角,并给气泡补 overflow-wrap: anywhere,保证长 URL 也能在气泡内换行。
This commit is contained in:
2026-10-24 19:27:03 +08:00
parent 6f35844fa4
commit 1cbf996a41
+12 -1
View File
@@ -2363,15 +2363,26 @@ export default {
font-size: 14px; font-size: 14px;
color: #1f2d3d; color: #1f2d3d;
word-break: break-word; word-break: break-word;
/* word-break: break-word 是旧别名;长 URL / 无空格串再兜一层,避免撑破气泡 */
overflow-wrap: anywhere;
} }
.chat-row.is-user .chat-bubble { .chat-row.is-user .chat-bubble {
padding: 10px 20px; padding: 10px 20px;
border-radius: 999px; /*
这里不能再用 999px:
圆角总和超过盒子尺寸时,浏览器会按比例缩小四个角直到相邻圆角不相交,
最终圆角 ≈ 较短边的一半。单行气泡的短边就是高度,缩完仍是胶囊;
但多行大文本的短边可达 300px 级,圆角跟着变成 150px+ 的巨大椭圆,
白底和边框兜不住矩形文字区,上下文字就漏到气泡外(用户反馈的大文本溢出)。
24px 对单行气泡仍会被夹到半高、保持胶囊观感;多行则稳定为圆角矩形。
*/
border-radius: 24px;
border: 1.5px solid #1590ff; border: 1.5px solid #1590ff;
color: #1590ff; color: #1590ff;
background: #fff; background: #fff;
font-weight: 600; font-weight: 600;
line-height: 1.7;
white-space: pre-wrap; white-space: pre-wrap;
} }