JS+CSS多行文本显示“更多”
本代码展示最多显示3行,每行行高16px,3行总高48px,4行总高64px
当文本行数1-3行,正常显示;当文本行数大于3行,显示“更多”。
CSS:
#CourseDesc { margin-top: 5px; font-size: 12px; position: relative; max-height: 48px; line-height: 16px; overflow: hidden; }
#CourseDesc .temp { position: absolute; top: -16px; left: 0; right: 0; max-height: 64px; line-height: 16px; overflow: hidden; color: transparent; }
#CourseDesc .temp span { position: absolute; top: 48px; right: 0; color: #B7B7C5; background: #4F4F73; }
#CourseDesc .temp span b { color: #08F; }
HTML:
<div id="CourseDesc"></div>
JQuery 页面加载后:
$("#CourseDesc").html($("#CourseDesc").text() + '<div class="temp">' + $("#CourseDesc").text() + '<span>…<b onclick="Show()">更多</b></span></div>')
JQuery 取值:
function Show() {
var more = $("#CourseDesc .temp span").html();
$("#CourseDesc .temp span").remove();
var v = $("#CourseDesc .temp").text();
$("#CourseDesc .temp").append('<span>' + more + '</span>');
}
JS+CSS多行文本显示“更多”的更多相关文章
- js+css+div的点击后显示或者隐藏
<html ><head><meta charset=utf-8 /><title>JS Bin</title></head> ...
- js控制不同的时间段显示不同的css样式
js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){ datetoday ...
- js点击更多显示更多内容效果
我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...
- css 之单行文本显示省略和多行文本省略
一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...
- vue打包后js和css、图片不显示,引用的字体找不到问题
vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...
- css判断不同分辨率显示不同宽度布局实现自适应宽度
一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...
- 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验
转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...
- JS&CSS文件请求合并及压缩处理研究(五)
接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...
- 勤能补挫-简单But易错的JS&CSS问题总结
错误频率较高的JS&CSS问题 勤能补拙,不管是哪门子技术,在实践中多多总结,开发效率慢慢就会提升.本篇介绍几个经常出错的JS&CSS问题,包括事件冒泡.(使用offset.scrol ...
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render
打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...
随机推荐
- AGC015D题解
简要题意 给定一个区间 \([l,r]\),从中选出若干整数按位或,求可能出现的数的方案数. 数据范围:\(1\le l\le r\le2^{60}\). 思路 首先对于 \([l,r]\) 里的数全 ...
- 机器学习 | 强化学习(2) | 动态规划求解(Planning by Dynamic Programming)
动态规划求解(Planning by Dynamic Programming) 动态规划概论 动态(Dynamic):序列性又或是时序性的问题部分 规划(Programming):最优化一个程序(Pr ...
- hgame2025-Crypto小记
hgame2025-Crypto小记 发现积压在文件夹有一段时间了.整理一下发出来. suprimeRSA task.py from Crypto.Util.number import * impor ...
- go module基本使用
前提 go版本为1.13及以上 官方文档 如果你想更深层次的了解GO MODULE的意义及开发者们的顾虑,可以直接访问官方文档(EN) https://github.com/golang/go/wik ...
- 工作面试必备:SQL 中的各种连接 JOIN 的区别总结!
前言 尽管大多数开发者在日常工作中经常用到Join操作,如Inner Join.Left Join.Right Join等,但在面对特定查询需求时,选择哪种Join类型以及如何使用On和Where子句 ...
- 【高德地图】离线地图jsapi2.0 插件引用
当引用一个插件,但是这个插件没有时会报错: Uncaught TypeError: AMap.ControlBar is not a constructor 这里引用了罗盘这个插件 这时候需要翻看高德 ...
- JOKER智能可视化平台 20250204版本更新说明
本次 JOKER 低代码平台更新涵盖了代码生成.环境变量.可视化开发工具等多个关键领域的优化与新增功能,致力于为开发者提供更高效.更安全.更便捷的开发体验.同时,服务端功能的正式发布以及核心升级,进一 ...
- 【C#】VS2019新建C#类自动添加作者版权等信息
VisualStudio2019新建C#类自动添加作者版权等信息 问题: 新建C#类的时候经常需要手动添加注释和版权等信息,那么如何新建类的时候就让编译器自动添加好这些信息呢? 解决: 参考网上的资料 ...
- 解决 Maven 打包项目中 Excel 文件乱码问题
在 Java 项目开发过程中,我们常常会使用 Maven 来管理项目依赖和进行项目打包.当涉及到使用 Freemarker 导出 Excel 文件时,不少开发者可能会遇到一个让人头疼的问题 --Exc ...
- 微软正式发布 .NET 10 Preview 3
2025年4月11日,.NET团队在博客上宣布了.NET 10 Preview 3的正式发布,文章参见:https://devblogs.microsoft.com/dotnet/dotnet-10- ...