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

效果如下：