html内容折叠,HTML+CSS入门文本折叠详解

本篇教程介绍了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知识！

html内容折叠,HTML+CSS入门文本折叠详解相关推荐

marquee标签 html5,HTML+CSS入门 marquee标签详解
本篇教程介绍了HTML+CSS入门 marquee标签详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 在W3C官方文档中找不到这个标签,也就是说不是官方推荐的标签但 ...
html 自定义打印模板,HTML+CSS入门自定义模板详解
本篇教程介绍了HTML+CSS入门自定义模板详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 首先总的stylecss和大模板都是当初angel_Kitty学姐的,嗯, ...
css input 内容换行显示,CSS文本换行详解
还记不记得昨天发表的<table表格那点事儿>最后的一个问题不?先撇开问题,我们从头说起. 在网页排版中,有些时候是需要文本自动换行的,对于中文来讲,无需设置属性即可自动实现换行,但是对于 ...
Android基础入门教程——2.3.1 TextView(文本框)详解
Android基础入门教程--2.3.1 TextView(文本框)详解标签(空格分隔): Android基础入门教程本节引言: 学习完Android中的六大布局,从本节开始我们来一个个讲解And ...
python读取word内容复制粘贴,Python读取word文本操作详解
本文研究的主要问题时Python读取word文本操作,分享了相关概念和实现代码,具体如下. 一,docx模块 Python可以利用python-docx模块处理word文档,处理方式是面向对象的.也就 ...
css样式继承规则详解
css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
linux Shell（脚本）编程入门实例讲解详解
linux Shell(脚本)编程入门实例讲解详解为什么要进行shell编程在Linux系统中,虽然有各种各样的图形化接口工具,但是sell仍然是一个非常灵活的工具.Shell不仅仅是命令的收集, ...
[Python从零到壹] 十一.数据分析之Numpy、Pandas、Matplotlib和Sklearn入门知识万字详解(1)
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
(图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...

html内容折叠,HTML+CSS入门文本折叠详解

html内容折叠,HTML+CSS入门文本折叠详解相关推荐

最新文章

热门文章

html内容折叠,HTML+CSS入门 文本折叠详解

html内容折叠,HTML+CSS入门 文本折叠详解相关推荐

最新文章

热门文章

html内容折叠,HTML+CSS入门文本折叠详解

html内容折叠,HTML+CSS入门文本折叠详解相关推荐