css自定义省略实例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
    <title>合体</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        /*
        用于模拟段落伸缩情况，这里可以看成是整个动画是0%~100%，0~50%收缩；50%~100%伸展
        */
        @-webkit-keyframes width-change {
            0% {width: 100%}
            50% {width: 50%;}
            100% {width: 100%}
        }

        .ellipsis {
            position: relative;
            /*只展示需要的内容，其他不需要的模块可隐藏*/
            /*overflow: hidden;*/
            /*这里为了更好了解实现逻辑设置width50%， 一般为100%*/
            width: 60%;
            /*这里为什么是108,因为设置的是6行，且行高为18，6*18*/
            max-height: 108px;
            line-height: 18px;
            background: rgb(230, 230, 230);
            /*动画无限滚动，更好查看效果。*/
            /*-webkit-animation: width-change 28s ease infinite;*/
        }

        /*
        这个容器框看起来是多余的，实则：
            自定义”...更多“显示样式用到ellipsis-ghost容器。该容器及其部分子元素的height是同父元素变化的。
            容器高度自适应正是实现自定义“...更多”效果精髓。如果没有ellipsis-container,则ellipsis-ghost高就为ellipsis设置的最大值108px.
            ellipsis-content容器装的是文字，文字内容决定ellipsis-container的高度，ellipsis-ghost设置为position:absolute,会脱离文档流，
            在文字的上方，设置其left: 50%,只显示其半，显示的是ellipsis-placeholder，ellipsis-placeholder高度和ellipsis允许的最大高度
            一样，而ellipsis-ghost的第三个元素ellipsis-more的位置就根据.ellipsis-ghost:before元素决定，而.ellipsis-ghost:before的
            高度又是随ellipsis-content一样变化。

            也就是ellipsis的max-height和ellipsis-placeholder的height一致，这是所允许最多行数的高度了，如果文字所需高度大于上诉高度才会
            出现更多。比如说上述需要的是四行才出现省略，而内容是三行的这不会出现。

        */
        .ellipsis-container {
            position: relative;
            /*display: -webkit-box;*/
            /*-webkit-box-orient: vertical;*/
            /*-webkit-line-clamp: 6;*/  /**/
            /*font-size: 50px;*/
            /*color: transparent;*/
        }

        .ellipsis-content {
            display: inline-block;
            color: #000;
            font-size: 12px;
            text-align: justify;
        }

        .ellipsis-ghost {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 50%;
            width: 100%;
            height: 100%;
            color: #000;
            background-color: rgba(255,64,84,0.45);
        }

        .ellipsis-ghost:before {
            display: block;
            float: right;
            content: "";
            width: 50%;
            height: 100%;
            background: rgb(64 115 193);
        }

        .ellipsis-placeholder {
            display: block;
            float: right;
            content: "";
            width: 50%;
            height: 108px;
            background: #9f8d3c;
            opacity: .4;
        }

        .ellipsis-more {
            float: right;
            width: 50px;
            height: 18px;
            margin-top: -18px;
            font-size: 12px;
            background: #f00;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="ellipsis">
        <div class="ellipsis-container">
            <div class="ellipsis-content">
                腾讯成立于1998年11月，是目
                前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一
                切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服
                务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交
                所主板公开上市(股票代号700)。
            </div>
            <div class="ellipsis-ghost">
                <div class="ellipsis-placeholder"></div>
                <div class="ellipsis-more">...更多</div>
            </div>
        </div>
    </div>
</body>
</html>
posted @ 2020-11-19 11:18 し7709 阅读(148) 评论(0) 收藏举报
刷新页面返回顶部
し7709

css自定义省略实例1

公告
