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

css自定义省略实例2的更多相关文章

  1. css自定义省略实例1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 纯 CSS 自定义多行省略：从原理到实现

    文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开 ...

  3. 【转】精选30个优秀的CSS技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  4. 精选30个优秀的CSS技术和实例

    精选30个优秀的CSS技术和实例   投递人 墙头草 发布于 2008-12-06 20:57 评论(97) 有17487人阅读 原文链接 [收藏] « » 今天,我为大家收集精选了30个使用纯CSS ...

  5. jquery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  6. css技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  7. CSS自定义样式

    CSS自定义样式 1. 自定义字体 先将字体文件放到web服务器上,需要时自动下载到用户计算机上 属性:@font-face 例: @font-face{ font-family:myFont; sr ...

  8. jQ效果：jQuery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  9. CSS 分类 (Classification) 实例

    CSS 分类 (Classification) 实例CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...

随机推荐

  1. request表示HttpServletRequest对象?

    request表示HttpServletRequest对象.它包含了有关浏览器请求的信息,并且提供了几个用于获取cookie, header, 和session数据的有用的方法. response表示 ...

  2. sp-MVC-ideabaok

    直接通过初始化器创建 或者通过创建maven工程在自己添加需要的东西 配置 dispatcher-servlet.xml 包括扫描加载包: <context:component-scan bas ...

  3. List、Set、Map 是否继承自 Collection 接口？

    List.Set 是,Map 不是.Map 是键值对映射容器,与 List 和 Set 有明显的区别, 而 Set 存储的零散的元素且不允许有重复元素(数学中的集合也是如此),List 是线性结构的容 ...

  4. spring 提供了哪些配置方式？

    基于 xml 配置 bean 所需的依赖项和服务在 XML 格式的配置文件中指定.这些配置文件通常 包含许多 bean 定义和特定于应用程序的配置选项.它们通常以 bean 标签开 头. 例如: &l ...

  5. pandas学习总结

    什么是pandas pandas数据读取 03. Pandas数据结构 Pandas查询数据的几种方法

  6. 8_LQR 控制器_状态空间系统Matlab/Simulink建模分析

    再线性控制器中讲到: 举例说明(线性控制器中的一个例子)博客中有说明 在matlab中:使用lqr求解K1.K2 这里希望角度(即x1)能迅速变化,所以Q矩阵中Q11为100,并没有关心角速度(dot ...

  7. 使用Node.js版本管理器

    使用Node.js版本管理器 完全卸载Node.js 清除Package缓存:npm cache clean --force 卸载Node.js:wmic product where caption= ...

  8. css两栏布局、圣杯布局、双飞翼布局

    最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...

  9. 《深入理解ES6》笔记——扩展对象的功能性（4）

    变量功能被加强了.函数功能被加强了,那么作为JavaScript中最普遍的对象,不加强对得起观众吗? 对象类别 在ES6中,对象分为下面几种叫法.(不需要知道概念) 1.普通对象 2.特异对象 3.标 ...

  10. 深入理解ES6之《块级作用域绑定》

    众所周知,js中的var声明存在变量提升机制,因此ESMAScript 6引用了块级作用域来强化对变量生命周期的控制let const 声明不会被提升,有几个需要注意的点1.不能被重复声明 假设作用域 ...