<!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. java-注解相关

    注解 概念:说明程序的,给计算机看  注释:用文字描述程序 先了解一些怎么正常javadoc文档 1:给类或者方法添加doc注释 2:通过命令javadoc 执行 类.java文件 新建的类: /** ...

  2. wx-sdk 打包安装到本地maven仓库

    下载官方sdk项目,导入idea 给WXPayConfig.java 中抽象方法加上public修饰符 进行 mav install ,在target 目录下找到wxpay-sdk-**.jar cm ...

  3. js--事件循环机制

    前言 我们知道JavaScript 是单线程的编程语言,只能同一时间内做一件事,按顺序来处理事件,但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这又是为什么呢?本文来总结一下js 的事件 ...

  4. pandas - drop()函数

    函数形式:DataFrame.drop(labels=None, axis=0, index=None, columns=None, level=None, inplace=False, errors ...

  5. numpy入门—numpy是什么

    numpy是什么?为什么使用numpy 使用numpy库与原生python用于数组计算性能对比

  6. 小程序输入框闪烁BUG解决方案

    前言 本人所说的小程序,都是基于mpvue框架而上的,因此BUG可能是原生小程序的,也有可能是mpvue的. 问题描述 在小程序input组件中,如果使用v-model进行双向绑定,在输入时会出现光标 ...

  7. 【面试普通人VS高手系列】谈谈你对AQS的理解

    AQS是AbstractQueuedSynchronizer的简称,是并发编程中比较核心的组件. 在很多大厂的面试中,面试官对于并发编程的考核要求相对较高,简单来说,如果你不懂并发编程,那么你很难通过 ...

  8. python爬虫---表情包批量采集

    代码: import requests from pyquery import PyQuery as pq # 比xpath还要灵活的html解析工具 # 定义请求 headers = { " ...

  9. css如何实现图片响应式等比例缩放，裁剪

    <div class="bg_picWrapper"  :style="{backgroundImage:'url('+img+')'}">---- ...

  10. python---二维数组的查找

    """ 在一个二维数组中(每个一维数组的长度相同), 每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序. """ # ...