思路：

　　省略号使用绝对定位添加，开头部分避免突兀使用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. 【转】在.net Core 中像以前那样的使用HttpContext.Current

    1.首先我们要创建一个静态类 public static class MyHttpContext { public static IServiceProvider ServiceProvider; p ...

  2. Java JRT

    解释器 运行步骤: 找到环境变量CLASSPATH,CLASSPATH包含一个或者多个目录,用作查找.class文件的根目录 从根目录开始,解释器获取包名并将每个.替换成\或/(取决于操作系统) 得到 ...

  3. 34 char类型转换为int类型

    #include<iostream> #include<cstdlib > using namespace std; int main() { char a=101; int ...

  4. SQL-43 将所有to_date为9999-01-01的全部更新为NULL,且 from_date更新为2001-01-01。

    题目描述 将所有to_date为9999-01-01的全部更新为NULL,且 from_date更新为2001-01-01.CREATE TABLE IF NOT EXISTS titles_test ...

  5. jmeter+jdk 环境搭建

    1.安装jdk环境  https://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html 划上重点,,,如果发现java -version不 ...

  6. RockeMq源码之Client

    Client中既有producer,也有consumer,先看前者 org.apache.rocketmq.client.producer.DefaultMQProducer.class 一般都是调用 ...

  7. JAVA集合接口及类

    各接口及类关系图 Iterable 所有集合的初始接口,实现该接口可进行foreach操作,只有一个iterator()方法,并返回iterator类型: Iterable在java.lang下,It ...

  8. HTML5：定位

    定位 一.介绍: position设置块级元素相对于其父块的位置和相对于它自身应该在的位置,任何使用定位的元素都会成为块级元素. 1.属性值 属性值 描述 absolute 生成绝对定位的元素,相对于 ...

  9. SpringBoot（五）Springmvc+Mybatis+mysql

    为了整合这个花了,好长时间,因为上几个连在一起,在pom文件中有没注释的配置,导致我找这个问题找了好久.下面开始 1,先new project 时选择spring initializr,新建好一个空项 ...

  10. 剑指Offer 27. 字符串的排列 （字符串）

    题目描述 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 输入描述: 输 ...