先看效果：

收缩状态

展开状态

源代码：

<!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. Pr常用的键盘操作

    Pr常用的键盘操作 Shift选中切开的小段 Alt复制效果

  2. vs2015运行时提示未加载vcruntime140.adm64.pb

    后调试查看发现 vs2015运行时提示未加载vcruntime140.adm64.pb 解决方案:去微软官网下载安装 vc_redist.exe ,安装就可以了.有64位版和32位版,根据计算机配置进 ...

  3. [PAT] A1017 Queueing at Bank

    [思路] 1:将所有满足条件的(到来时间点在17点之前的)客户放入结构体中,结构体的长度就是需要服务的客户的个数.结构体按照到达时间排序. 2:wend数组表示某个窗口的结束时间,一开始所有窗口的值都 ...

  4. mybatis入门案例2

    1. 笔记:1.配置了typeAlias之后,在其他需要写com.itheima.domain.User的地方都可以用user代替 2.先用properties指定了jdbcConfig.proper ...

  5. JAVA并发同步互斥实现方式总结

    大家都知道加锁是用来在并发情况防止同一个资源被多方抢占的有效手段,加锁其实就是同步互斥(或称独占)也行,即:同一时间不论有多少并发请求,只有一个能处理,其余要么排队等待,要么放弃执行.关于锁的实现网上 ...

  6. LaTeX技巧007：每一章开始的header引用名言应该怎么做？

    [问题描述] 看到很多论文的每一章开始的右上角都有一段名人名言, 我试验了很多次一直都搞不清楚是怎么搞?是用fancyhead么?谁可以说说呢? 多谢了 [解决方案] 使用epigraph宏包来制作即 ...

  7. LED And Incandescent, Who Is Suitable For Holiday Lighting?

    Fast-fire advantages of LED lighting: Eco-friendly-LEDs are not made of toxic chemicals, such as mer ...

  8. ActiveMQ使用JDBC持久化

    步骤一:创建一个数据库            步骤二:配置activemq.xml配置文件                1.在persistenceAdapter加入如下配置 <!--crea ...

  9. linux - python2.6.6 升级到python2.7.14

    一.升级 Python 2.7.14 版本 1. 准备安装包,系统是最小化安装 # 下载安装依赖的相关包[root@vip ~]# yum install vim gcc make wget -y [ ...

  10. 题解 AT859 【元素の系統名】

    题目传送门. 介绍一种使用string字符串的方法. \(string\)是\(C++\).\(java\).\(VB\)等编程语言中的字符串,字符串是一个特殊的对象,属于引用类型. \(C++\)标 ...