場景描述
商城購物車元素左右布局的內容商品描述，使用多級flex布局時虹菲，文字溢出以省略號代替會出現(xiàn)失效的情況
使用場景
解決方案
在父級元素增加 overflow: hidden
<!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>
- tips 度娘的解決方案其實很多，但是這種實現(xiàn)方式相對比較簡單洪唐，大佬勿噴荷科，有問題求指正
