先看效果：

收缩状态

展开状态

源代码：

<!doctype html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>文本折叠测试</title>

    <style>

        .a-text { font-size: 20px;color: #b30000;cursor: pointer;}

        .a-text:hover { color: red;}

        .p1 {font-size: 16px;color: #0a001f;width: 500px;  }

        .p2 { font-size: 16px; color: #0a001f; width: 500px; display: none;  }

    </style>

</head>

<body>

<p class="p1">

    1.substring 方法

    定义和用法substring 方法用于提取字符串中介于两个指定下标之间的字符。

    语法stringObject.substring(start,stop)参数 描述start 必需。一个非负的整数，

    规定要提取的子串的第一个字符在 stringObject 中的位置。stop 可选。一个非负的整数，

    比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的

    子串会一直到字符串的结尾。返回值一个新的字符串，该字符串值包含 stringObject 的一个子字符串，

    其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。说明substring 方法返回的子串包

    括 start 处的字符，但不包括 end 处的字符。如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度

    为 0 的字符串）。

</p>

</body>

<script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>

<script type="text/javascript">

    $(function () {

        text_foled('.p1', 100);

    });

    /**

     * jQuery 文本折叠展开特效

     * @param clas：存放文本的容器

     * @param num：要显示的字数

     */

    function text_foled(clas, num) {

        var num = num;

        var a = $("<a></a>").on('click', showText).addClass('a-text').text("【展开】");

        var b = $("<a></a>").on('click', showText).addClass('a-text').text("【折叠】");

        var p = $("<p></p>").addClass('p2');

        var str = $(clas).text();

        $(clas).after(p);

        if (str.length > num) {

            var text = str.substring(0, num) + "...";

            $(clas).html(text).append(a);

        }

        $('.p2').html(str).append(b);

        function showText() {

            $(this).parent().hide().siblings().show();

        }

    }

</script>

</html>

html+css 文本折叠的更多相关文章

  1. 使用CSS实现折叠面板总结

    任务目的 深入理解html中radio的特性 深入理解CSS选择器以及伪元素的使用 任务描述 使用input的radio单选框特性结合CSS中的伪元素实现bootstrap中折叠面板(点击查看样例), ...

  2. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  3. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...

  4. css文本格式详解

    一.css文本主体内容: 二.css文本详解:  1.文本缩进 语法: text-indent:<length>|<percentage> 默认值为0. 属性值详解: < ...

  5. CSS文本与连接

    CSS文本 CSS文本属性可以定义文本外观,通过文本属性,可以改变文本的颜色.字符间距.对齐文本.装饰文本.对文本缩进等等. 常用的文本属性 属性 描述 color 文本颜色 direction 文本 ...

  6. [CSS]文本属性（Text）

      CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...

  7. CSS 文本、字体、链接

    CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化 ...

  8. CSS文本效果

    前面的话 本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...

  9. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

随机推荐

  1. hackintosh和windows时区问题

    最近搞了几台黑苹果,驱动.平台.引导基本搞明白了.但安装成功之后,发现一个问题,切换系统之后,时间老是差了几个小时. 这肯定是时区设置的事儿!百度之后,发现简单地往Windows注册表中写了一条信息就 ...

  2. bugku-求getshell（文件上传）

    这道题最主要是考的Content-type参数绕过WAF,然后利用绕过黑名单上传php进行解析. 先上传一个phpinfo()的php文件试试,burp抓包 正常操作,先将下面文件的类型改为:imag ...

  3. python的for循环的神奇之处

    python的for循环太神奇了: 你可以编写这样的语句: for i in range(10) : j= i**2 print(j) 你也可以编写这样的语句: with open('/path/to ...

  4. 服务起不来，查看ps axj 看服务是否为守护进程（TPGID 为-1）

    在linux命令行中输入: ps axj 查看服务进程的 TPGID 字段的值是否为-1 ,为-1表示为守护进程 不为-1表示不是守护进程,服务启动不起来,或者启动起来后又被杀死了

  5. Oracle 12c 如何在 PDB 中添加 SCOTT 模式（数据泵方式）

    Oracle 12c 建库后,没有 scott 模式,本篇使用数据泵方式,在12c版本之前数据库中 expdp 导出 scott 模式,并连接 12c 的 pdb 进行 impdp 导入. 目录 1. ...

  6. html css二级导航栏

    二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...

  7. 使用ADO.NET 访问数据库

    一.ADO.NET :用于连接数据库的技术 1.ADO.NET分为两大组件 DataSet:数据集 .NET FRAMWORK :用于连接到数据库,发送命令,检索结果 2.ADO.NET四大核心对象 ...

  8. ELK学习实验015：日志的自定义index配置

    前面使用json格式收集了nginx的日志,但是再index的显示是filebeat-*,现在使用自定义的index进行配置 但是再使用filebeat的7.4版本以后,有一个巨坑,就是按照网络的很多 ...

  9. Vuejs+elementUI框架开发的项目结构及文件关系

    项目结构|----- build #webpack编译相关文件目录,一般不用动 |----- config #配置目录|         |------ dev.env.js #开发环境变量| |-- ...

  10. 优化公式排版和Beamer相关知识

    做优化的同学可能会碰到排列形如 max    ******* s.t.   ***** = *        ***** > ***        ...    的格式 既要要求 max 和 s ...