<!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； */