element-plus / element-plus

🎉 A Vue.js 3 UI Library made by Element team
https://element-plus.org
MIT License
24.55k stars 16.61k forks source link

[Component] [notification] Notification 通知组件的title与message会出现不换行然后超出当前范围的情况 #17021

Open yaowangmx opened 5 months ago

yaowangmx commented 5 months ago

Bug Type: Component

Environment

Reproduction

Related Component

Reproduction Link

Element Plus Playground

Steps to reproduce

title与messages设置为同一个字母比如:AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

What is Expected?

通知组件样式正常换行显示

What is actually happening?

文本没有换行

Additional comments

解决方法: .el-notification { .el-notification__icon { flex-shrink: 0; } .el-notification__group { flex: 1; width: 0; .el-notification__title, .el-notification__content p { word-wrap: break-word !important; word-break: normal !important; } } }

Liao-js commented 5 months ago

你可以试着自己提交 PR 的