先看效果：

收缩状态

展开状态

源代码：

<!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. C#中System.ServiceProgress报错

    场景 在C#中检索本地计算机所有服务时,使用 System.ServiceProcess.ServiceController[] services = System.ServiceProcess.Se ...

  2. 虚拟机ifconfig 没有IP地址显示

    虚拟机centos 找不到IP地址 -----------------下图解决后有ip地址----------------------- 1.  查看网络IP和网关     >>1.  查 ...

  3. PAT (Basic Level) Practice （中文）1066 图像过滤 (15 分)

    图像过滤是把图像中不重要的像素都染成背景色,使得重要部分被凸显出来.现给定一幅黑白图像,要求你将灰度值位于某指定区间内的所有像素颜色都用一种指定的颜色替换. 输入格式: 输入在第一行给出一幅图像的分辨 ...

  4. Qt Gui 第六章布局管理

    1.QRadioButton之间如何互斥 其中一种方法是将各个QRadioButton控件放在同一个toolbarsLayout或者toolbarsGroupBox即可:如下所示 toolbarsGr ...

  5. 从零开始学 Java - 搭建 Spring MVC 记录云创的日子 第一章

    2017年11月29日 来到新项目,需要用到Spring MVC ,那么我就开始记录我这次的学习. Spring MVC 框架是围绕一个 DispatcherServlet 来设计的,这个 Servl ...

  6. HTML5,从零开始

    一.网页的组成部分 <!DOCTYPE html> <html> <head> <title>这是标题</title> <meta c ...

  7. Android View框架的draw机制

    概述 Android中View框架的工作机制中,主要有三个过程: 1.View树的测量(measure) Android View框架的measure机制 2.View树的布局(layout)Andr ...

  8. 项目部署 ubuntu Django uwsgi配置

    1.进入项目文件夹 mkdir uwsgi_file vim uwsgi.ini 写入保存 [uwsgi] chdir = /home/mysite/my_project # 项目目录 module ...

  9. 对主定理(Master Theorem)的理解

    前言 虽说在学OI的时候学到了非常多的有递归结构的算法或方法,也很清楚他们的复杂度,但更多时候只是能够大概脑补这些方法为什么是这个复杂度,而从未从定理的角度去严格证明他们.因此借着这个机会把主定理整个 ...

  10. 拦截器 Filter ： js、css、jpg、png等静态资源不被拦截解决方案

    方案一: web.xml配置文件拦截范围缩小 ,没有必要 /*的配置拦截项目下所有资源. <filter> <filter-name>Login</filter-name ...