本篇教程介绍了HTML+CSS入门 文本折叠详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
<
先看效果：
收缩状态
展开状态
源代码：
html>
文本折叠测试.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; }
1.substring 方法
定义和用法substring 方法用于提取字符串中介于两个指定下标之间的字符。
语法stringObject.substring(start,stop)参数 描述start 必需。一个非负的整数，
规定要提取的子串的第一个字符在 stringObject 中的位置。stop 可选。一个非负的整数，
比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的
子串会一直到字符串的结尾。返回值一个新的字符串，该字符串值包含 stringObject 的一个子字符串，
其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。说明substring 方法返回的子串包
括 start 处的字符，但不包括 end 处的字符。如果 start 与 end 相等，那么该方法返回的就是一个空串(即长度
为 0 的字符串)。
$(function () {
text_foled(‘.p1‘, 100);
});
/**
* jQuery 文本折叠展开特效
* @param clas：存放文本的容器
* @param num：要显示的字数
*/
function text_foled(clas, num) {
var num = num;
var a = $("").on(‘click‘, showText).addClass(‘a-text‘).text("【展开】");
var b = $("").on(‘click‘, showText).addClass(‘a-text‘).text("【折叠】");
var p = $("
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();
}
}
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
