思路：

　　省略号使用绝对定位添加，开头部分避免突兀使用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. python3练习-发送IP地址到邮箱（使用日志）

    看了下python下的logging模块,和java的log4j差不多,把之前的代码改为使用log配置的方式实现功能(需求和之前的相同,地址"http://www.cnblogs.com/G ...

  2. linux 程序无缘无故推出 没有core文件 broken pipe Resource temporarily unavailable

    问题 1. linux socket 服务端程序 无缘无故退出 . 2. 客户端大量访问服务端后,出现  Resource temporarily unavailable错误 问题分析: 1. 是否有 ...

  3. 使用ssm（spring+springMVC+mybatis）创建一个简单的查询实例（三）（错误整理篇）

    使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一) 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(二) 以上两篇已经把流 ...

  4. C# 自定义配置文件

    配置文件有两种设置方式,第一种是直接在网站根目录下的web.config中设置:第二种方式是自定义配置文件,在web.config中指定其他配置文件的路径. 第一种:除了在常用的appSettings ...

  5. laravel5.2加载自定义的aliyun扩展包

    把文件夹加载进来 在 app.php里面注册 serviceprovider 在 app/filesystems.php 里面 加入相关的配置 把 cloud的值 改成对应的扩展 在.env文件里面完 ...

  6. mysql 安装到最后一步时,start service 为失败状态

    容易出现的问题:mysql 安装到最后一步时,start service 为失败状态.   解决方法: 方式1  MySQL安装是出现could not start the service mysql ...

  7. Mysql 截取日期的方法

    //显示年月日 select date_format(date ,'%Y-%m-%d' ) from talbe_a //根据年月日分组 select date_format(date ,'%Y-%m ...

  8. 移动rem自适应

    /** * rem计算方式:设计图尺寸px / 100 = 实际rem 例: 100px = 1rem */!function (window) { /* 设计图文档宽度 */ var docWidt ...

  9. 文本分类TextCNN

    参考来源:https://blog.csdn.net/u012762419/article/details/79561441 TextCNN结构 TextCNN的结构比较简单,输入数据首先通过一个em ...

  10. 使用jsoup轻松爬数据

    刚刚学习爬虫,感觉使用jsoup爬虫挺容易的.记录一下自己爬取数据的过程. Jsoup介绍: Jsoup 是一个 Java 的开源HTML解析器,可直接解析某个URL地址.HTML文本内容.使用Jso ...