多級flex佈局文字溢出省略號失效

時間 2020-01-31

原文原文鏈接

<!DOCTYPE html>
<html>css

<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>html

/* 大佬勿噴，有問題求指正 */
        /* 問題描述：使用多級flex佈局時，文字溢出以省略號代替失效；
           使用場景：商城購物車元素左右佈局內容的商品描述；
           解決方案：在父級元素增長overflow: hidden；
        */

相關標籤/搜索