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

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

  1. css自定义省略实例2

    <!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. MySQL 中 InnoDB 支持的四种事务隔离级别名称，以及逐 级之间的区别？

    SQL 标准定义的四个隔离级别为: 1.read uncommited :读到未提交数据 2.read committed:脏读,不可重复读 3.repeatable read:可重读 4.seria ...

  2. 简述 Mybatis 的插件运行原理，以及如何编写一个插件。

    Mybatis 仅可以编写针对 ParameterHandler.ResultSetHandler. StatementHandler.Executor 这 4 种接口的插件,Mybatis 使用 J ...

  3. kafka 的高可用机制是什么？

    这个问题比较系统,回答出 kafka 的系统特点,leader 和 follower 的关系,消息 读写的顺序即可.

  4. 学习ITIL

    ITIL IT运维管理体系: IT管理中的PPT(people人:process流程:technology技术): 标准化(是否有紧急故障处理流程).工具化: 备份解决方案:灾备解决方案: 监控解决方 ...

  5. springboot gateway 动态路由-01

    SpringCloud Gateway 是 Spring Cloud 的一个全新项目,该项目是基于 Spring 5.0,Spring Boot 2.0 和 Project Reactor 等技术开发 ...

  6. 复杂JSON字符串解析，可以少走弯路

    发现一个好文章:装载至http://www.verejava.com/?id=17174254038220 package com.json5;    import org.json.JSONArra ...

  7. simulink中的两种求导模块

    最终图像都是下图形式

  8. C# Coding Conventions, Coding Standards & Best Practices

    C# Coding Conventions, Coding Standards & Best Practices Cui, Chikun Overview Introduction This ...

  9. vue H5 超简单的swiper制作抖音上拉切换视频播放

    -----html部分------ <swiper vertical :style="{height: windowheight+'px',width:375+'px'}" ...

  10. web项目中视频的上传和展示

    思路: 上传:<form>表单提交视频-->后台使用字节流保存到本地. 展示:<video>标签展示: src属性发送请求 --> 使用字节流将视频绑定到响应并返回 ...