<!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. git-learningmeiy

    什么是版本控制-版本迭代: 版本控制(Revision control)是一种在开发的过程中用于管理我们对文件.目录或工程等内容的修改历史,方便查看更改历史记录,备份以便恢复以前的版本的软件工程技术. ...

  2. Saltstack自动化扩容

    一. etcd服务的安装和使用 1.安装etcd应用: wget https://github.com/coreos/etcd/releases/download/v2.2.5/etcd-v2.2.5 ...

  3. 学习RabbitMQ（一）

    消息中间件 一.简介 消息中间件就是在消息的传输过程中保存消息的容器.消息中间件再将消息从它的源中继到它的目标时充当中间人的作用.队列的主要目的是提供路由并保证消息的传递:如果发送消息时接收者不可用, ...

  4. 攻防世界 NaNNaNNaNNaN-Batman

    NaNNaNNaNNaN-Batman 下载出一个文件我们一开始不知道是个啥,我们拉入到sublime中看一下 我们可以发现在最开始的位置有一个_是一段函数变量,最后的eva()那个是执行函数代码,但 ...

  5. 前端工作面试HTML相关问题

    前端工作面试HTML相关问题 Q: doctype(文档类型)的作用是什么? A: 在HTML中 doctype 有两个主要目的. 对文档进行有效性验证: 它告诉用户代理和校验器这个文档是按照什么DT ...

  6. C++：Abstract class : invalid abstract return type for member function ‘virtual...’

    #include <iostream> #include <cmath> #include <sstream> using namespace std; class ...

  7. 安装并使用Junit

    在Eclipse中配置Junit的方法有两种方式: 第一种方法: 1.下载junit的jar包,目前它的版本是junit3.8.1,可以从www.junit.org上下载. 2.在要使用Junit的p ...

  8. js获取异步方法里面的数据

    这里介绍  五种方法(说白了本质 就三种) 1.callback回调函数  function getData(callback){ setTimeout(()=>{ let name = '哈哈 ...

  9. vue上拉加载下拉加载

    npm i vue-scroller <scroller :on-refresh="refresh" :on-infinite="infinite" :n ...

  10. YC-Framework版本更新:V1.0.6

    分布式微服务框架:YC-Framework版本更新V1.0.6!!! 本文主要内容: V1.0.6版本更新主要内容 V1.0.6版本更新主要内容介绍 一.V1.0.6版本更新主要内容 1.系统例子覆盖 ...