先看效果：

收缩状态

展开状态

源代码：

<!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. spring boot的一些常用注解

    spring boot的一些常用注解: 使用@SpringBootApplication注释: 许多Spring Boot开发人员喜欢他们的应用程序使用自动配置,组件扫描,并能够在其“应用程序类”上定 ...

  2. Java-跳跃路线

    题目: 小明参加了学校的趣味运动会,其中的一个项目是:跳格子.地上画着一些格子,每个格子里写一个字,如下所示: 从我做起振我做起振兴做起振兴中起振兴中华 比赛时,先站在左上角的写着“从”字的格子里,可 ...

  3. select count(1)和select count(*)的区别

    select count(1) from 表a //查询时会对常数列进行统计行数select count(*) from 表a //查询时会找表a中最短的列进行统计行数 因为使用count(*)查询会 ...

  4. python ide 使用

    pycharm jupyter 官方文档 使用 部署到服务器 参考 配置域名(反向代理) *.conf文件 server { listen ; server_name ju.iii.top; inde ...

  5. 1.（group by）如何让group by分组后，每组中的所有数据都显示出来

    问题描述:表如下,如何让这个表按device_id这个字段分组,且组中的每条数据都查寻出来?(假如说这个表名为:devicedata) 错误答案:select * from devicedata GR ...

  6. cartographer保存地图

    手持激光,并用cartographer建图,保存的地图是.pbstream格式 ht@ht:~$ rosservice call /write_state /home/ht/Desktop/carto ...

  7. [CF1303C] Perfect Keyboard - DFS

    Solution 根据原字符串建图,每个字符是一个点,相邻则连边 然后从每一个度数为 \(1\) 的点开始爆搜连通块,合法情况下应该是一条链 #include <bits/stdc++.h> ...

  8. Redis基础详解

    1. Redis是什么.特点.优势 Redis是一个开源的使用C语言编写.开源.支持网络.可基于内存亦可持久化的日志型.高性能的Key-Value数据库,并提供多种语言的API. 它通常被称为 数据结 ...

  9. 安装oracle11gR2

    一.通过百度云等途径下载oracle11gR2 二.安装步骤 1,解压缩文件,将两个压缩文件一起解压. 2,在setup.exe右键--属性--兼容性,勾“以管理员身份运行此程序”. 3,双击“set ...

  10. 深入理解IP之CIDR

    现代IP基于分类的IP越来越少,而基于CIDR的方式的越来越多.那么可以看下面这篇文章: https://www.cnblogs.com/hark0623/p/6547432.html 这篇文章对CI ...