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;
}
效果如下：
