【css】white-space: pre-wrap;带来的问题:第一行文字前面有个空格

383 阅读1分钟

white-space中有2个属性,pre-line和pre-warp

image.png

如果希望识别每个换行符和每个空格,就需要使用pre-warp

我的需求是,管理员在审核时,备注信息输入了什么,包括格式,用户在详情页就看到什么

image.png

展示:

image.png

问题在于格式化代码时,代码中的换行会被white-space: pre-wrap;识别

image.png

页面上就成了这样

image.png

如果代码中这样写的就没问题

<el-row class="mt10 remark">{{ child.remarks }}</el-row>

但是这样是不保险的,万一同事哪天加了几个类名或写了个其他属性,一格式化,这问题又出来了

正确的做法是使用v-text或v-html,因为我这里没有标签,就用v-text吧

<el-row class="mt10 remark" v-text="child.remarks" />

测试文案:

审核通过,shenhe审核 shenheshenheshenheshenheshenshenheshenheshenheshenheshenheshenheshenheshenshenheshenheshenhshenhe, shenhe, shenhe, shenhe, shenhe, shenhe, shenhe, shenhe, shenhe, shenhe, shenhe, shenhe, shenhe, shenhe, shenhe, shenhe 审核通过,审核通过,审核通过,审核通过,审核通过,审核通过,审核通过,
审核通过,
审核通过,



审核通过, 审核通过, 审核通过,           审核通过,审核通过,审核通过,审核通过,审核通过,审核通过,审核通过,审核通过,审核通过,审核通过,审核通过,审核通过,审核通过,审核通过 审核通过,审核通过,审核通过,审核通过审核通过审核通过审核通过审核通过,审核通过,审核通过,审核通过审核通过,审核通过,审核通过,审核通过,审核通过,审核通过,审核通过,审核通过审核通过核通过审核通过审核通过,