标签宽度确定，让文字在标签内平均分布

标签宽度确定，让文字在标签内平均分布

<div class="basic-info">
    <div class="basic-info__username">
        <div class="left">
            <span class="text">用户名</span>
            <span class="value">{{ info.userName }}</span>
        </div>
        <div class="right">修改</div>
    </div>
    <div class="basic-info__mobile">
        <span class="text">手机账号</span>
        <span class="value">{{ info.mobile }}</span>
    </div>
    <div class="basic-info__sex">
        <div class="left">
            <span class="text">性  别</span>
            <span class="value">{{ info.sex === 1 ? '男' : '女'}}</span>
        </div>
        <div class="right">修改</div>
    </div>
    <div class="basic-info__authority">
        <span class="text">角色权限</span>
        <span class="value" v-if="info.authority === '1'">超级管理员</span>
        <span class="value" v-if="info.authority === '2'">管理员</span>
        <span class="value" v-if="info.authority === '3'">审核人员</span>
        <span class="value" v-if="info.authority === '4'">上传人员</span>
    </div>
</div>

方法一

.text {
    text-align-last: justify; // 让文字在标签内平均分布
    width: 80px;
    font-size: 20px;
    font-weight: 400;
    color: #5D5F62;
    line-height: 20px;
}

方法二

.text {
    text-align: justify;
    width: 80px;
    font-size: 20px;
    font-weight: 400;
    color: #5D5F62;
    line-height: 20px;
}
.text:after {
    display: inline-block ; 
    content: ''; 
    padding-left: 100%;
}