flex布局解决没有限制宽度的省略样式
我们所熟悉的省略样式是这样的
.ellipsis{
width:100px; <!--要有宽度的限制-->
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;}当你遇到这样的布局省略，你会怎么办呢？以上的ellipsis样式已经满足不了UX设计师。
22.png
商品的价格是紧接着商品名称展示的，如果商品名称太长，会展示不下商品的价格，所以UX设计师要求是商品名称在一行展示不下的时候需要省略号。
这时候你是不是会想到计算商品名称的字符长度，然后去截断商品名称，不错这也是一个可行的方案，可是列表中的商品名称那么多，你需要遍历数组一个一个的计算，性能上就是一个很大的缺陷。
css3中的flex布局可以完美的解决这个问题，这里先简单介绍flex属性
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
值描述
flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
下面简单介绍我们的CSS的使用步骤
父节点中要设置样式（*必须加overflow: hidden）
display: flex; overflow: hidden;
子节点中要设置样式
flex: 0 1 auto;// flex-item默认的值;
在商品名称的节点上设置样式
text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
完整的代码如下
感谢，老铁的阅读，如果喜欢的,帮忙点个????,你的支持我是前进的动力++
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #eee;
}
.list {
width: 100%;
padding: 20px
}
.card {
display: flex;
padding: 12px;
line-height: 80px;
box-shadow: 0 0 6px #e1e1e1;
border-radius: 6px;
margin-bottom: 10px;
background-color: white;
}
.card-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: flex;
flex: 1;
padding-right:6px;
}
.card-title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-right: 6px;
flex: 0 1 auto; /* flex 默认值 可去掉*/
}
.card-number {
color: #666;
flex: 0 1 auto; /* flex 默认值 可去掉*/
}
.card-right {
flex: none;
color: rgb(250, 100, 100)
} </style></head><body>
<ul class="list">
<li class="card">
<div class="card-text">
<span class="card-title">男鞋</span>
<span class="card-number">￥9933</span>
</div>
<span class="card-right">热卖</span>
</li>
<li class="card">
<div class="card-text">
<span class="card-title">男鞋女鞋儿童鞋老人鞋</span>
<span class="card-number">￥9933</span>
</div>
<span class="card-right">热卖</span>
</li>
<li class="card">
<div class="card-text">
<span class="card-title">男鞋女鞋儿童鞋老人鞋布鞋皮鞋高跟鞋</span>
<span class="card-number">￥9933</span>
</div>
<span class="card-right">热卖</span>
</li>
</ul></body></html>
作者：lzy_9fff
链接：https://www.jianshu.com/p/3d867f285cf6
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。