思路：

　　省略号使用绝对定位添加，开头部分避免突兀使用c3渐变背景颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>mutiple Text</title>

    <style>

        div, p , span, a{

            margin: 0;

            padding: 0;

        }

        a {

            text-decoration: none;

        }

        .wrap {

            border: 1px solid #cecece;

            max-width: 800px;

            margin: 0 auto;

            padding: 10px 20px;

            font-size: 16px;

            position: relative;

            z-index: 1;

        }

        div.content {

            height: 60px;

            line-height: 30px;

            overflow: hidden;

            position: relative;

            z-index: 1;

        }

        div.more {

            display: flex;

            align-content: center;

            height: 30px;

            line-height: 30px;

            font-size: 16px;

            position: absolute;

            z-index: 2;

            right: 20px;

            bottom: 10px;

        }

        div.more em {

            height: 30px;

            width: 20px;

            background: -webkit-linear-gradient(left, rgba(255,255,255,0),rgba(255,255,255,1));

        }

        div.more span, div.more a {

            background: #fff;

        }

    </style>

</head>

<body>

    <div class="wrap" id="JS_wrap">

        <div class="content" id="JS_content">

            <span>@<a href="javascript:;">哈哈哈</a></span>

            关于你。就是因为我的害怕，我亲眼看你走向她。我喜欢你是事实，你有女朋友也是事实。我以为我不说出口就会保持这样的朋友关系，却还是她赶了个巧，那应该是个寒假，你有女朋友了，我还是听说，我那么爱，却还是无果。于是我和她之间就莫名其妙的就多少有了敌人的感觉，或许就是别人口中的那样，世界上完全不相干的两个女人，会因为一个男人要么很友好，要么是仇恨。关于她我做不到友好，但也不是仇恨，只是你选择了她，我就希望她好好爱你，照顾你，连我的份也一起爱了。自爱上你的那天起，思念便成了戒不掉的瘾。你的一言一笑，一颦一蹙，无不牵动我的心，百千尘思，唯念一缕；万千红颜，唯恋一人。我愿意一生漂泊浪迹在你的故事里，甘愿为你鞍前马后，马首是瞻，即使你从未给我一句承诺，即使你从未给我半分爱情，依然无悔无怨。

        </div>

        <div class="more">

            <em></em>

            <span id="JS_ellipsis">... ...</span>

            <a class="more_link" id="JS_more" href="javascript:;" data-more="0">查看更多</a>

        </div>

    </div>

</body>

<script>

    var oMoreBtn = document.querySelector('#JS_more');

    var oContent = document.querySelector('#JS_content');

    var oWrap = document.querySelector('#JS_wrap');

    var oEllipsis = document.querySelector('#JS_ellipsis');

    oMoreBtn.addEventListener('click', function(e) {

        if(this.getAttribute('data-more') === '0') {

            oWrap.style.paddingBottom = '40px';

            oContent.style.height = 'auto';

            this.setAttribute('data-more', '1');

            oEllipsis.innerHTML = '^';

            this.innerHTML = '收起';

        }else {

            oWrap.style.paddingBottom = '10px';

            oContent.style.height = '60px';

            this.setAttribute('data-more', '0');

            oEllipsis.innerHTML = '... ...';

            this.innerhTML = '查看更多';

        }

    });

</script>

</html>

效果：

点击按钮展开：

css 实现多行文本末尾显示省略号的更多相关文章

  1. CSS 单行 多行文本溢出显示省略号

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  2. 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  3. css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  4. css实现多行文本溢出显示省略号(…)

    WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit- ...

  5. css自动省略号...，通过css实现单行、多行文本溢出显示省略号

    网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示. 一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellip ...

  6. CSS实现单行、多行文本溢出显示省略号（…）

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  7. CSS和JS实现单行、多行文本溢出显示省略号（该js方法有问题不对）

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  8. CSS单行、多行文本溢出显示省略号（……）

    这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...

  9. CSS单行、多行文本溢出显示省略号

    如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...

随机推荐

  1. 微信支付---公众号支付和H5支付区别

    微信支付分为如下几种:(来源https://pay.weixin.qq.com/wiki/doc/api/index.html) 本文主要讲解公众号支付和H5支付,两者均属于线上支付比较常用的方式: ...

  2. linux timing profile

    double getUnixTime(void) { struct timespec tv; ) ; return (((double) tv.tv_sec) + (double) (tv.tv_ns ...

  3. 64位win7连接ACCESS报错“Microsoft.Jet.OLEDB.4.0”问题

    本人开发了桌面软件,关于事务提醒,自己一直在用,很喜欢,但是在64位win7上无法运行,网上说多种方法,都觉得麻烦.后来自己在vs2012下编译成x86版本,结果可以运行在64位win7下了. 原来如 ...

  4. 泥瓦工vps

    http://blog.sina.com.cn/s/blog_16a3cb7cb0102xbvd.html

  5. C++中 string 的用法大全

    之所以抛弃char*的字符串而选用C++标准程序库中的string类,是因为他和前者比较起来,不必 担心内存是否足够.字符串长度等等,而且作为一个类出现,他集成的操作函数足以完成我们大多数情况下(甚至 ...

  6. Scrapy爬虫框架中的两个流程

    下面对比了Scrapy爬虫框架中的两个流程—— ① Scrapy框架的基本运作流程:② Spider或其子类的几个方法的执行流程. 这两个流程是互相联系的,可对比学习. 1 ● Scrapy框架的基本 ...

  7. 无法对含有多个.java（或.class）文档的程序进行编译（或解释）

    通常初学者会出现这样的问题:无法对含有多个.java(或.class)文档的程序进行编译(或解释). root@yogile-VirtualBox:/alive/string# javac work/ ...

  8. 剑指Offer 58. 对称的二叉树 （二叉树）

    题目描述 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. 题目地址 https://www.nowcoder.com/practice/ ...

  9. 王者荣耀交流协会 -- 第5次Scrum会议

    Scrum master : 任思佳 要求1 : 工作照片 照片由王超同学拍摄 ,王露芝同学(外援)没有参加本次会议. 要求2 : 时间跨度:2017年10月17日 18:00 - 18:25 共计2 ...

  10. s21day08 python笔记

    s21day08 python笔记 一.现阶段所有内容回顾 以后把每天的笔记直接补充到python学习 二.进制 对于计算机而言无论是文件存储 / 网络传输输入本质上都是:二进制(0101010101 ...