<!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. 攻防世界shrine

    shrine import flask import os app = flask.Flask(__name__) app.config['FLAG'] = os.environ.pop('FLAG' ...

  2. ajax解析json对象集合

    这个需求是我们做项目经常遇到的,当你想渲染表格的数据,你的数据在servlet中存在了arraylist中,你想把arraylist传到ajax的data中,这时候就需要用到ObjectMapper对 ...

  3. 10本 Linux PDF 书籍免费分享

    本篇文章主要分享以下Linux开发PDF书籍 一.Linux程序设计二.Unix环境高级编程三.Unix_Linux编程实践教程四.鸟哥的私房菜五.深入理解Linux内核六.Linux命令行与shel ...

  4. Linux套接子(c语言)模拟http请求、应答

    有关套接子和http请求报文的博客在CSDN有很多比如,点这里查看,这里我就不再做过多赘述了,下面我们直接实战,模拟http请求. 要求:浏览器访问本地的localhost,在浏览器页面打印出 Hel ...

  5. vue双向绑定、Proxy、defineproperty

    本文原链接:https://www.jianshu.com/p/2df6dcddb0d7 前言 双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素 ...

  6. javaweb之修改功能

    数据库的修改功能,主要是通过查询,保留之前的数据,得到当前想要修改的页面,并进行修改. 一.dao层 在dao层需要添加两个fangfa,一个查询,一个修改(这是整个dao层,包括之前的增删.浏览) ...

  7. Servlet 3.0以上版本使用@WebServlet注解配置映射

    以前的Servlet都是在web.xml中进行配置,导致web.xml中各个Servlet的映射非常杂乱无章,后期也很难维护 本篇文章将详细阐述如何使用Servlet 3.0的新特性使用@WebSer ...

  8. IO流入门

    @ 目录 总结内容 1. IO流是什么 2. 字符流和字节流 3. File常用API(前面类型为返回类型) 4. 编码转换 5. IO流实现流程 6. 输入输出流简单实现 7. 输入输出流简单实现 ...

  9. 使用pyttsx3实现简单tts服务

    操作系统:Windows 10_x64 python版本:Python 3.9.2_x64 pyttsx3版本: 2.90   pyttsx3是一个tts引擎包装器,可对接SAPI5.NSSS(NSS ...

  10. 【深度学习 论文篇 01-1 】AlexNet论文翻译

    前言:本文是我对照原论文逐字逐句翻译而来,英文水平有限,不影响阅读即可.翻译论文的确能很大程度加深我们对文章的理解,但太过耗时,不建议采用.我翻译的另一个目的就是想重拾英文,所以就硬着头皮啃了.本文只 ...