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