<template>
    <el-card header="css文本两端对齐方式">
        <h3 class="mb-5">文字对齐方式一</h3>
        <div
            v-for="(item, index) in handleList"
            :key="index"
            class="w-[400px] flex justify-between"
        >
            <span
                v-for="(cItem, cIndex) in item"
                :key="cIndex"
                >{{ cItem }}</span
            >
        </div>
        <el-divider />
        <h3 class="mb-5">文字对齐方式二</h3>
        <div
            v-for="(item, index) in list"
            :key="index"
            class="w-[400px] text-box"
        >
            {{ item }}
        </div>
        <el-divider />
        <h3 class="mb-5">文字对齐方式三</h3>
        <div
            v-for="(item, index) in list"
            :key="index"
            class="w-[400px] text-box2"
        >
            {{ item }}
        </div>
    </el-card>
</template>

<script setup lang="jsx">
import { ref } from 'vue';
const list = ref(['第一行', '第二行文本', '第三行该怎么对齐喃']);
const handleList = ref([]);

handleList.value = list.value.map((item) => {
    return item.split('');
});
console.log(handleList.value);
</script>

<style lang="scss" scoped>
.text-box {
    /** 这个属性单行文本不生效的，所以需要用伪类添加一行 */
    text-align: justify;
    height: 26px;
}
.text-box::after {
    content: '';
    display: inline-block;
    width: 100%;
}

.text-box2 {
    text-align-last: justify;
}
</style>
