css自定义省略实例2 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
    <title>自适应</title>
    <style>
        * {padding: 0; margin: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
        html,body {
            width: 100%;
            min-width: 320px;
            max-width: 540px;
            margin: 0 auto;
        }
        html {font-size: 13.333333333333333vw}
        @media screen and (max-width: 320px) {
            html {font-size: 50px}
        }
        @media screen and (min-width: 540px) {
            html {font-size: 70px}
        }

        .forHidden {
            overflow: hidden;
            width: 100%;
            max-height: 1.2rem;
            line-height: .4rem;
        }

        .forAutoHeight {
            position: relative;
        }

        .content {
            width: 100%;
            color: #7f7f7f;
            font-size: .28rem;
            text-align: justify;
        }

        .forGhost {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 50%;
            width: 100%;
            height: 100%;
        }

        .forGhost:before {
            display: block;
            float: right;
            content: '';
            width: 50%;
            height: 100%;
        }
        .placeholder {
            float: right;
            width: 50%;
            /*这里的height为什么不是1.2rem，因为在自适应情况下，可能会有部分误差，所以这个值要大于最外层元素的max-height*/
            height: 1.3rem;
        }
        .ellipsisMore {
            display: block;
            float: right;
            width: 2.4rem;
            height: .4rem;
            padding-left: .4rem;
            margin-top: -.48rem;   /*第一个浮动元素的高度刚好是可见高度，超出被裁剪，所以当更多按钮位于第二个浮动元素后面时，需要往上移，和最后一个段落平齐*/
            line-height: .4rem;
            color: green;
            text-decoration: none;
            font-size: .26rem;
            /*一个文字被遮住部分会有些突兀，可设置遮罩背景部分透明以表达过渡效果*/
            background:linear-gradient(90deg, transparent 2%, #fff 16%, #FFF 0);
        }

        /*利用:target伪元素实现加载更多效果(不足是如果页面有滚动，定位会将段落定位到页面顶端*/
        .forHidden:target { max-height: none; }
        .forHidden:target .ellipsisMore { display: none; }
    </style>
</head>
<body>
     <div id="forHidden" class="forHidden">
         <div class="forAutoHeight">
             <div class="content">
                 《论生命之短暂》
                 生命并不短暂，只是我们浪费的太多；
                 一生足够漫长，如能悉心投入，足以创建丰功伟绩；
                 然而，在漫无目的、挥霍无度、汲汲于无聊琐事，
                 最终陷入万劫不复的终极之时，我们才会幡然大悟。
             </div>
             <div class="forGhost">
                 <div class="placeholder"></div>
                 <a href="#forHidden" class="ellipsisMore" target="_self">...更多</a>
             </div>
         </div>
     </div>
</body>
</html>

 

posted @ 2020-11-19 11:15  し7709  阅读(97)  评论(0)    收藏  举报