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 ...
随机推荐
- centos 运行springboot 项目
jar文件发布: 准备工作: 发布在springboot项目中的pom.xml文件添加如下: <build> <plugins> <plugin> <grou ...
- 补充:基于项目的协同过滤推荐算法(Item-Based Collaborative Filtering Recommendation Algorithms)
前言 继续上篇博客,继续读论文. 想看上篇论文的同学可以点击这里 相关工作 In this section we briefly present some of the research litera ...
- 【论文随笔】会话推荐系统综述(A Survey on Conversational Recommender Systems)
前言 今天读的论文为一篇于2021年5月发表在<ACM计算机调查>(ACM Computing Surveys)的论文,文章提供了对话式推荐系统(CRS)的全面综述,探讨了CRS的定义.概 ...
- PHP将变量存储在数据库中,读取并执行变量的方法
http://www.edbiji.com/doccenter/showdoc/4/nav/1214.html 例如将下边的字符串存储到数据库中您好,您的验证码是".$authcode.&q ...
- 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
在 AI 编程领域国内外有一堆能叫的上号的应用: Cursor Windsurf Trae 阿里的「通义灵码」 百度的「文心快码」 字节跳动的「MarsCode」 科大讯飞的「iFlyCode」 Gi ...
- 使用Win32控制台实现boost共享内存通信
发送端: #define BOOST_DATE_TIME_NO_LIB #include <boost/interprocess/shared_memory_object.hpp> #in ...
- Java 8的新特性还不了解?快进来!
能坚持别人不能坚持的,才能拥有你想拥有的.关注 编程大道,让我们一起成长
- word突然无法转换latex公式的解决尝试
正常情况下我在word插入复制的latex公式步骤如下(以\(\mu\neq 10\)为例): 把\(\mu\neq 10\)粘贴到word文档中,选中\(\mu\neq 10\)并同时按下alt和等 ...
- unigui的ServerModule的重要属性【8】
ServerModule是unigui的重要模块. uniGUI 服务器的内部结构. 每个 uniGUI 服务器都有一个ServerModule的副本, 每台服务器创建一次, 同时根据用户活动动态创建 ...
- MCP (Model Context Protocol)初体验:企业数据与大模型融合初探
简介 模型上下文协议(Model Context Protocol,简称MCP)是一种创新的开放标准协议,旨在解决大语言模型(LLM)与外部数据和工具之间的连接问题.它为AI应用提供了一种统一.标准化 ...