先看效果：

收缩状态

展开状态

源代码：

<!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. SpringBoot整合持久层技术--（三）Spring Data JPA

    简介: JPA(java Persistence API)和SpringData是两个范畴的概念.spring data jpa是spring公司下的spring data项目的一个模块. sprin ...

  2. nvm，nrm和yarn

    nvm Node Version Management nvm list 查看所有已安装的 node 版本 nvm install 版本号 安装指定版本的 node nvm use 版本号 切换到指定 ...

  3. oracke数据库分区新增

    1.发现一些过程执行报错,报错原因是'ora-14400插入的分区关键字未映射到任何分区',原来是2020年库表的时间子分区未扩展: 2.扩展子分区的语句是 ALTER TABLE 表名 MODIFY ...

  4. ECMAScript基本对象——Date日期对象

    1.创建 var 对象名 = new Date(); 2.方法 ①toLocaleString()据本地时间格式,把 Date 对象转换为字符串.和电脑的语言位置有关 ②getTime()返回 197 ...

  5. php函数的巧妙应用

    直接切入正题: 1.extract();函数从数组中把变量导入到当前的符号表中 对于数组中的每个元素,键名用于变量名,键值用于变量值. 第二个参数 type 用于指定当某个变量已经存在,而数组中又有同 ...

  6. 区间dp（模板+例题）

    参考博文:区间dp小结(附经典例题) 首先,什么是区间dp?它是干什么的? 先在小区间进行DP得到最优解,然后再利用小区间的最优解合并求大区间的最优解 操作往往涉及到区间合并问题 以上. 模板如下: ...

  7. Codeforces667D（spfa+dp）

    题意: 给定一个带权有向图,若P(A,B)表示节点A到B的最短路长度,选择四个节点ABCD,使得P(A,B)+P(B,C)+P(C,D)最大. 节点数n在1,000以内,边数m在2,000以内. 思路 ...

  8. 对one hot 编码的理解，sklearn. preprocessing.OneHotEncoder()如何进行fit()的？

    查阅了很多资料,逐渐知道了one hot 的编码,但是始终没理解sklearn. preprocessing.OneHotEncoder()如何进行fit()的?自己琢磨了一下,后来终于明白是怎么回事 ...

  9. 针对wordpress CMS的信息收集

    如果发现一个站点用的是wordpress管理系统的话, 可以试试默认的后台地址:/wp-admin/ 访问后自动跳转置 后台登录界面 用户名收集 :/?author=1 依次访问/author=1 , ...

  10. ansible-主机分组

    一.安装ansible yum install ansible -y ansible --version //查看版本,没有报错即安装成功 二.ansible主机定义与分组 1. ansible配置文 ...