注:转载 http://blog.csdn.net/zgh0711/article/details/78270555
代码块
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<div class="main">
<div class="content">
<h4 class="name">a namea namea namea namea</h4>
</div>
<div class="content">
<h4 class="name">b namea namea namea namea </h4>
</div>
<div class="content">
<h4 class="name">c namea</h4>
</div>
</div>
<style type="text/css">
.main {
display: flex;
}
.content {
overflow: hidden; /*也可以用 width:0 代替*/
flex: 1; /*关于flex的属性值请看官网,这里相当于 flex-grow */
border:1px solid red;
}
.name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
效果:
以上的盒子都是固定的长度,如果你想设置不同的长度,就分开改各自的flex属性即可。
代码块
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<div class="main">
<div class="long">
<h4 class="name">a namea namea namea namea</h4>
</div>
<div class="short">
<h4 class="name">b namea namea namea namea </h4>
</div>
<div class="short">
<h4 class="name">c namea</h4>
</div>
</div>
<style type="text/css">
.main {
display: flex;
}
.long {
overflow: hidden;
flex: 2; //这里控制长度
border:1px solid red;
}
.short {
overflow: hidden;
flex: 1;
border:1px solid red;
}
.name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
效果:
以上我写的代码在各个浏览器显示都是正常的