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

一、以 ElementUI 组件为例

示例代码：

假设设定了盒子的宽度为 200，label的属性展示的文本效果与需要的效果不一致。

image.png

我们所需的效果是括号里边的进行换行。

image.png

由于我们不是在

{{ message }}

里边进行的换行所以 v-html 是不起效果的。我们需要的是在 label 里进行一个换行

使用转义符 \n 后我们发现效果还是没有改变

image.png

因为 html 中，默认空白会被浏览器忽略。所以我们要在该标签中加入样式 white-space: pre 告诉浏览器需要保留空白。达到我们所需要的效果：

image.png