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>

最后编辑于：2020.10.16 15:50:34