p标签换行后文本对齐处理
原文本内容为: “【5分】责任感强,工作认真仔细,超期超量优质独立的完成交办的所有工作任务和工作内容,且未出现任何差错、拖延、推诿、客户投诉或客户不满意的任一情况\n【4分】责任感强,工作认真仔细,可以正常独立的完成交办的所有工作任务和工作内容且未出现任何差错、拖延、推诿、客户投诉或客户不满意的任一情况\n【3分】有一定责任感,工作不太认真仔细,存在需在他人的指导或帮助协助下才能完成交办的所有工作任务和工作内容且未出现任何差错、拖延、推诿、客户投诉或客户不满意的任一情况\n【2分】不能完成交办的所有工作任务和工作内容,或工作中出现差错、拖延、推诿、客户投诉或客户不满意任一情况\n【1分】不能完成交办的工作任务和工作内容,或工作中出现差错、拖延、推诿、客户投诉或客户不满意的情况合计达到二次”
注意:用span标签 样式会不起效果
<template slot-scope="scope">
<div style="white-space: pre-line;" v-html="handleAlign(scope.row.standard)"></div>
</template>
handleAlign(text){
let str = text.replace(/\【/g,"</p><p class='text-custom'>$&")
return str.slice(4)
},
css
.text-custom {
margin-left: 3.5em;
text-indent: -3.5em; // 重点这两行样式
margin-top: -1em;
}
.text-custom:first-child {
margin-top: 0;
}
.text-custom:last-child {
margin-bottom: 0;
}