问题复现
- 在自己做公司项目中遇到一个问题，使用气泡确认框
<el-popconfirm>组件时，发现其标题title字段默认不换行
- 而我的标题文本较长，如果只放在一行会很难看，网上找了一些方法都没有一篇文章完整说的清的
解决方法
- 首先在组件中
title字段不能使用字符串，需要用v-bind绑定变成JS表达式结构
- 然后放入你写的文本，需使用模板字符串包裹文本，需要换行的地方使用
\n进行换行
<el-popconfirm :title="`删除分类前请确保子分类和子词典\n都已删除,否则会造成结构混乱！`" >
<el-button slot="reference">删除</el-button>
</el-popconfirm>
- 然后还需要更改
el-popconfirm气泡弹出框的样式，用pre-line实现文本换行显示
- 注意！由于
el-popconfirm组件的结构是写在<div id="app"></div>之外的，所以你写的样式如果是在组件内的话，可能会导致样式不生效！
- 解决方式是在
app.vue全局组件中写，或者使用::v-deep进行组件穿透
.el-popconfirm__main {
white-space: pre-line;
}
效果展示
