一、以 ElementUI 组件为例
示例代码：
<el-form-item prop="managementFee" label="项目利润(包含所得税)">
<el-input
:disabled="!edit"
placeholder="请输入项目利润"
v-model="project.managementFee"
></el-input>
</el-form-item>
假设设定了盒子的宽度为 200，label的属性展示的文本效果与需要的效果不一致。
image.png
我们所需的效果是括号里边的进行换行。
image.png
由于我们不是在 <div>{{ message }}</div> 里边进行的换行所以 v-html 是不起效果的。我们需要的是在 label 里进行一个换行
<el-form-item prop="managementFee" label="项目利润 \n(包含所得税)">
<el-input
:disabled="!edit"
placeholder="请输入项目利润"
v-model="project.managementFee"
></el-input>
</el-form-item>
使用转义符 \n 后我们发现效果还是没有改变
image.png
因为 html 中，默认空白会被浏览器忽略。所以我们要在该标签中加入样式 white-space: pre 告诉浏览器需要保留空白。达到我们所需要的效果：
<el-form-item prop="managementFee" :label="`项目利润 \n(包含所得税)`" style="white-space: pre">
image.png
