flex弹性布局
Webkit 内核的浏览器，必须加上
-webkit前缀。
flex:0 0 50px;
flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto
ps:
ios8以下版本没办法做到垂直居中显示
ios8以下版本必须有/* Safari */注释的样式
<div class="flex-wrap">
<div class="tit">标题</div>
<div class="txt">2很长很长很长很长很长很长很长很长很长很长很长很长2</div>
<div class="tit">标题</div>
</div>
.flex-wrap{
width: 100%;
display: -webkit-flex; /* Safari */
display: flex;
border: 1px solid #ccc;
height: 80px;
align-items: center;
}
.flex-wrap .tit{
flex: 0 0 50px;
width: 50px; /* Safari */
}
.flex-wrap .txt{
flex: 1;
width: 100%; /* Safari */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
table布局
table布局可以设置
ps: 必须设置table-layout: fixed; /* 列宽由表格宽度和列宽度设定。*/宽度超过显示省略号才可以生效
<div class="table-wrap">
<div class="table-td">标题</div>
<div class="table-dd">
<div>2很长很长很长很长很长很长很长很长很长很长很长很长2</div>
</div>
<div class="table-td">标题</div>
</div>
.table-wrap{
width: 100%;
margin-top: 20px;
display: table;
table-layout: fixed;
height: 80px;
border: 1px solid #ccc;
}
.table-wrap div{
vertical-align: middle;
}
.table-wrap .table-td{
width: 50px;
display: table-cell;
}
.table-wrap .table-dd{
display: table-cell;
}
.table-wrap .table-dd div{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
