【切图笔记】之上下结构的单元展示视图（处理单行省略号）

最新推荐文章于 2024-05-17 18:09:12 发布

菜鸭。

最新推荐文章于 2024-05-17 18:09:12 发布

阅读量82

点赞数

分类专栏：切图笔记文章标签：笔记

本文链接：https://blog.csdn.net/aaa44123/article/details/132287547

版权

切图笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、实现效果

省略号效果

二、注意

这种可以固定小单元宽高的或者用百分比设定的，都算是给定了宽高，之后在做省略号处理时正常加上省略三件套就可以了。

.page-ellipsis {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

整体代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单元上下上下布局
    </title>
    </title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .page-ellipsis {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .root {
            width: 600px;
            height: 200px;
            margin: 0 auto;
            background-color: aqua;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .box {
            width: 138px;
            height: 64px;
            background-color: aquamarine;
            margin: 0 auto;
            text-align: center;
            /* line-height: 64px; */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .box-count {
            width: 100%;
            font-size: 22px;
        }

        .box-count span {
            font-size: 14px;
        }

        .box p {
            line-height: 1.2;
        }

        .box-name {
            font-size: 14px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="box">
            <p class="box-count page-ellipsis">50 <span>个</span></p>
            <p class="box-name page-ellipsis">我是名字</p>
        </div>
        <div class="box">
            <p class="box-count page-ellipsis">50 <span>个</span></p>
            <p class="box-name page-ellipsis">我是名字</p>
        </div>
        <div class="box">
            <p class="box-count page-ellipsis">50 <span>个</span></p>
            <p class="box-name page-ellipsis">我是名字</p>
        </div>
    </div>
</body>

</html>

但有时候需要靠内容撑开盒子，但又需要省略号的情况。
去掉具体宽度以后，不仅省略号无法出现，并且root下的flex布局也失效了。
这种情况下，可以将当前盒子的min-width设定为0，先恢复flex布局。然后设定当前盒子的flex属性为1，可以平分盒子。效果如下

flex：1代表什么？参见flex：1代表什么
min-width: 0为什么能解决flex布局失效（flex布局溢出的问题）?参见min-width：0
可以给p标签加上左右padding，让文字不贴边，更美观。