思路：

　　省略号使用绝对定位添加，开头部分避免突兀使用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. React Native 开发日常、常见问题总结及解决

    优点: 1.写 UI 快,跟写 HTML 差不多,flex 布局写起来很爽,而且跨平台: 2.调试方便,command + R 直接刷新 Simulator,不用像 Xcode 等待编译: 3.体验好 ...

  2. day35-python 操作memcache一

    memcache简介 Memcached是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象减少读取数据库的次数,从而提高动态.数据库驱动网站的速度. ...

  3. 浏览器输入URL按回车后都经历了什么？

    在浏览器上输入一个URL,按回车后,这个过程发生了什么? 1.首先,浏览器地址栏输入了URL,先解析URL,检测URL地址是否合法 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直 ...

  4. L1-057 PTA使我精神焕发

    以上是湖北经济学院同学的大作.本题就请你用汉语拼音输出这句话. 输入格式: 本题没有输入. 输出格式: 在一行中按照样例输出,以惊叹号结尾. 输入样例: 无 输出样例: PTA shi3 wo3 ji ...

  5. void的几点用法

    1.可以通过void 0 获取undefined.等同于void(0). void 任意数 === undefined   // true void(0) === undefined  // true ...

  6. [Ajax] 如何使用Ajax传递多个复选框的值

    HTML+JavaScript代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  7. JAVA学习笔记系列1-Java版本介绍

    JavaSE(Java Standard Edition):标准版,定位在个人计算机上的应用(桌面应用).因为一般都是Windows系统,因此Java的这个发展并不好. JavaEE(Java Ent ...

  8. VC++、MFC Sqlite3数据库的使用

    SQLite数据库是一种本地的轻型数据库,在存储一些本地的数据的时候,或者不需要用到Oracle,SQL2008之类的大型数据库的时候,Sqlite的优势就能够得到发挥.程序需要采集数据存储起来,可以 ...

  9. 关于CMD的一些小技巧

    1.cd命令无法切换路径怎么办? a)切换盘符不好使

  10. nodeJS文件操作

    让前端觉得如获神器的不是NodeJS能做网络编程,而是NodeJS能够操作文件.小至文件查找,大至代码编译,几乎没有一个前端工具不操作文件.换个角度讲,几乎也只需要一些数据处理逻辑,再加上一些文件操作 ...