如何给 HTML 标签中的文本属性添加换行效果

一、以 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