css文字折行以及双端对齐实现方式

使用flex布局后，文字超出容器部分不会自动折行了。实现代码如下：

<el-row>
    <el-col :span="24">
        <span class="label">姓名</span>
        <span class="content">{{name}}</span>
    </el-col>
    <el-col :span="24">
        <span class="label">介绍</span>
        <span class="content">{{intro}}</span>
    </el-col>
</el-row>

.el-col{
    line-height: 25px;
    display: flex;
    flex-direction: row;
    padding: 10px;
    .label{
        color:#666;
        width: 105px;
        flex-shrink: 0;
        flex-grow: 0;
        padding-right: 5px;
    }
    .content{
        width: calc(100% - 105px);/*设定宽度，不然不生效*/
        word-wrap:  break-word;   /*使用css换行*/
        word-break:  normal;   
    }
}

实现文本左右对齐方式：

.label{
  	text-align-last: justify;
}

效果如下：