本代码展示最多显示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多行文本显示“更多”的更多相关文章

  1. js+css+div的点击后显示或者隐藏

    <html ><head><meta charset=utf-8 /><title>JS Bin</title></head>  ...

  2. js控制不同的时间段显示不同的css样式

    js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){        datetoday ...

  3. js点击更多显示更多内容效果

    我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...

  4. css 之单行文本显示省略和多行文本省略

    一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...

  5. vue打包后js和css、图片不显示,引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  6. css判断不同分辨率显示不同宽度布局实现自适应宽度

    一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...

  7. 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验

    转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...

  8. JS&CSS文件请求合并及压缩处理研究(五)

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  9. 勤能补挫-简单But易错的JS&CSS问题总结

    错误频率较高的JS&CSS问题 勤能补拙,不管是哪门子技术,在实践中多多总结,开发效率慢慢就会提升.本篇介绍几个经常出错的JS&CSS问题,包括事件冒泡.(使用offset.scrol ...

  10. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...

随机推荐

  1. centos 运行springboot 项目

    jar文件发布: 准备工作: 发布在springboot项目中的pom.xml文件添加如下: <build> <plugins> <plugin> <grou ...

  2. 补充:基于项目的协同过滤推荐算法(Item-Based Collaborative Filtering Recommendation Algorithms)

    前言 继续上篇博客,继续读论文. 想看上篇论文的同学可以点击这里 相关工作 In this section we briefly present some of the research litera ...

  3. 【论文随笔】会话推荐系统综述(A Survey on Conversational Recommender Systems)

    前言 今天读的论文为一篇于2021年5月发表在<ACM计算机调查>(ACM Computing Surveys)的论文,文章提供了对话式推荐系统(CRS)的全面综述,探讨了CRS的定义.概 ...

  4. PHP将变量存储在数据库中,读取并执行变量的方法

    http://www.edbiji.com/doccenter/showdoc/4/nav/1214.html 例如将下边的字符串存储到数据库中您好,您的验证码是".$authcode.&q ...

  5. 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理

    在 AI 编程领域国内外有一堆能叫的上号的应用: Cursor Windsurf Trae 阿里的「通义灵码」 百度的「文心快码」 字节跳动的「MarsCode」 科大讯飞的「iFlyCode」 Gi ...

  6. 使用Win32控制台实现boost共享内存通信

    发送端: #define BOOST_DATE_TIME_NO_LIB #include <boost/interprocess/shared_memory_object.hpp> #in ...

  7. Java 8的新特性还不了解?快进来!

    能坚持别人不能坚持的,才能拥有你想拥有的.关注 编程大道,让我们一起成长

  8. word突然无法转换latex公式的解决尝试

    正常情况下我在word插入复制的latex公式步骤如下(以\(\mu\neq 10\)为例): 把\(\mu\neq 10\)粘贴到word文档中,选中\(\mu\neq 10\)并同时按下alt和等 ...

  9. unigui的ServerModule的重要属性【8】

    ServerModule是unigui的重要模块. uniGUI 服务器的内部结构. 每个 uniGUI 服务器都有一个ServerModule的副本, 每台服务器创建一次, 同时根据用户活动动态创建 ...

  10. MCP (Model Context Protocol)初体验:企业数据与大模型融合初探

    简介 模型上下文协议(Model Context Protocol,简称MCP)是一种创新的开放标准协议,旨在解决大语言模型(LLM)与外部数据和工具之间的连接问题.它为AI应用提供了一种统一.标准化 ...