共计 536 个字符，预计需要花费 2 分钟才能阅读完成。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container{
width: 300px;
height: 100px;
background: #7DC3FD;
color: #fff;
display: flex;
}
.item{
overflow: hidden;
flex: 1;
border: 1px solid #fff;
}
.line{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
商品图片
</div>
<div class="item">
<div class="line">
商品描述商品描述商品描述商品描述商品描述
</div>
</div>
</div>
</body></html>
/* 大佬勿喷，有问题求指正 */
/* 问题描述：使用多级 flex 布局时，文字溢出以省略号代替失效；使用场景：商城购物车元素左右布局内容的商品描述；解决方案：在父级元素增加 overflow: hidden；*/
正文完
