p标签换行后文本对齐处理

最新推荐文章于 2025-02-22 09:01:49 发布

原创最新推荐文章于 2025-02-22 09:01:49 发布 · 488 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

文章讨论了如何使用CSS样式调整，特别是.text-custom类，来改善带有评分评价的文本对齐问题，以清晰展示员工在工作任务中的表现，包括责任感、工作态度和客户反馈。

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;
}