<!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. Spring 框架中的单例 bean 是线程安全的吗?

    不,Spring 框架中的单例 bean 不是线程安全的.

  2. ZAB 协议？

    ZAB 协议是为分布式协调服务 Zookeeper 专门设计的一种支持崩溃恢复的原子广 播协议. ZAB 协议包括两种基本的模式:崩溃恢复和消息广播. 当整个 zookeeper 集群刚刚启动或者 L ...

  3. C++“拷贝构造函数”和“等号重载”有什么区别？

    CTypeA(const CTypeB& b)CTypeA& operator=(const CTypeB& b)一直没弄懂这两个有什么区别.只知道,重载了=号,下面复制的时候 ...

  4. 7. Github Pages 搭建网站

    7. Github Pages 搭建网站 个人站点 访问 https://用户名.github.io 搭建步骤 1) 创建个人站点   ->  新建仓库(注:仓库名必须是[用户名.github. ...

  5. (4)_结果与讨论Result and Discussion【论文写作】

  6. CSS 文本控制

    one more time one more chance. 一歩重头学前端, css入门. 学习一些 CSS 文本控制的属性,防止做傻事.请大家对照下面列表检验下: 会的.不会的.似懂非懂的.笔者是 ...

  7. 基于Vue实现关键词实时搜索高亮显示关键词

    最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github ...

  8. java中如何按一定的格式输出时间， 必须给出例子

    题目2: 按一定的格式输出时间 import java.util.*;import java.text.SimpleDateFormat;public class Test {    public s ...

  9. Android设置TextView为不可见

    通常控件的可见与不可见分为三种情况. 第一种    gone         表示不可见并且不占用空间 第二种    visible       表示可见 第三种    invisible    表示 ...

  10. ssm整合-ssmbuild

    目录 项目结构 导入相关的pom依赖 Maven资源过滤设置 建立基本结构和配置框架 Mybatis层编写 Spring层 Spring整合service层 SpringMVC层 Controller ...