思路：

　　省略号使用绝对定位添加，开头部分避免突兀使用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. es _cat API

    1.集群健康 curl -X GET "10.0.38.111:1200/_cluster/health?pretty"

  2. 原生js小球运动

    //html代码 <input type="button" value="小球运动" /> <div></div> //js ...

  3. 《TypeScript 中文入门教程》

    转载:<TypeScript 中文入门教程> 17.注解 (2015-12-03 11:36) 转载:<TypeScript 中文入门教程> 16.Symbols (2015- ...

  4. URL和URI（简单介绍）

    URL与URI 我们经常接触到的就是URL了,它就是我们访问web的一个字符串地址,那么URI是什么呢?他们是什么关系呢? URL:uniform resource location 统一资源定位符U ...

  5. Linux每天一个命令：nc/ncat

    nmap-ncat.x86_64版nc/ncat nc/ncat所做的就是在两台电脑之间建立链接并返回两个数据流,在这之后所能做的事就看你的想像力了.你能建立一个服务器,传输文件,与朋友聊天,传输流媒 ...

  6. web（六）css的基本语法、取值与单位

    css语法包含如下部分: 选择器:用于选择需要添加样式的元素. 属性(property):样式的属性名称,例如color代表颜色. 取值与单位:属性对应的值以及单位. 语法规则:css的某些固定语法. ...

  7. google Kickstart Round G 2017 三道题题解

    A题:给定A,N,P,计算A的N!次幂对P取模的结果. 数据范围: T次测试,1 ≤ T ≤ 100 1<=A,N,P<=105 快速幂一下就好了.O(nlogn). AC代码: #inc ...

  8. Centos6.5修改镜像为国内的阿里云源

    第一步:备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.back ...

  9. 《JavaScript 设计模式与开发实战》第一部分（1、2、3章）笔记

    第1章:面向对象的JavaScript 动态类型和鸭子类型 编程语言按照数据类型大体可以分为两类: ① 静态类型语言:在编译时便已确定变量的类型. ② 动态类型语言:变量类型要到程序运行的时候,待变量 ...

  10. 2java判断素数

    package com.test; import java.math.*;import java.util.Scanner; public class test222 { /** * @param a ...