直接上代码，全代码copy即可使用!

<template>
    <div class="reminder">
        <span class="Bold_12_body" style="line-height: 8vw">温馨提示：</span><br />
        <div class="rule-container">
            <div class="Regular_12_body subtitleColor rule">提示提示提示提示提示提示123123提示提示提示提示提示提示提示提示23</div>
            <div class="Regular_12_body subtitleColor rule">提示提示提示提示提示提示3123123提示提示提示提示提示提示提示提示23</div>
            <div class="Regular_12_body subtitleColor rule">提示提示提示提示提示提示提12312示提示提示提示提示提示提示提示23</div>
        </div>
    </div>
</template>

<script setup></script>
<style lang="less" scoped>
.reminder {
    padding: 25px;
}
.rule-container {
    counter-reset: rule-counter; /* 重置计数器 */
}

.rule {
    display: flex;
    justify-content: flex-start;
}

.rule::before {
    counter-increment: rule-counter; /* 计数器递增 */
    content: counter(rule-counter) '. '; /* 设置序号内容 */
    margin-right: 0.5em; /* 序号与文字之间的间距 */
}

.rule::after {
    content: attr(data-text); /* 设置文字内容 */
    display: block; /* 换行显示 */
    text-indent: 2em; /* 文字首行缩进 */
}
</style>

效果如下：其中注意如果是全数字的话，不会换行，需要自己修改使用哦！

上面属性可能存在兼容性，如果确定不会使用老版本浏览器就可以！