本代码展示最多显示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. FastAPI 自定义参数验证器完全指南:从基础到高级实战

    title: FastAPI 自定义参数验证器完全指南:从基础到高级实战 date: 2025/3/11 updated: 2025/3/11 author: cmdragon excerpt: 本教 ...

  2. Mqtt集成与设计

    Mqtt集成 集成mqtt,我们首先得明白什么是mqtt: MQTT(Message Queuing Telemetry Transport)是一种轻量级.基于发布-订阅模式的消息传输协议,适用于资源 ...

  3. linux 查看jdk安装路径

    [root@iz2ze9ufq5ehrayz6j88saz bin]# java -version java version "1.8.0_191" Java(TM) SE Run ...

  4. 如何删除Docker Swarm中的Node

    好吧,我又回来了...断了那么久主要是因为懒...现在有空会更新一些docker相关的知识.本文主要是总结下在工作中需要管理Docker Swarm中的Node遇到的问题:如何删除一个Swarm中的N ...

  5. Anaconda指定目录安装终极指南+避坑大全

    最近被Python环境搞疯了吧?一个项目跑起来另一个就报错?用Conda环境隔离大法就对了!但默认安装竟吃掉根分区8G的硬盘?今天手把手教你迁移安装目录+实战部署AI项目. 今天测试AIREPORT, ...

  6. 爬虫管理平台-TaskPyro的任务管理

    官网:https://docs.taskpyro.cn/ 任务管理 TaskPyro提供了强大而灵活的任务管理功能,让您能够轻松创建和管理Python脚本的定时任务. 创建任务 在TaskPyro中创 ...

  7. delphi获得唯一ID字符串

    //这是我三层开发中常用的一个函数,直接调用CreateSortID uses System.Win.ComObj,System.RegularExpressions,System.StrUtils, ...

  8. [每日算法 - 华为机试] leetcode172. 阶乘后的零

    入口 力扣https://leetcode.cn/problems/factorial-trailing-zeroes/ 题目描述 给定一个整数 n ,返回 n! 结果中尾随零的数量. 提示 n! = ...

  9. Vue3封装支持Base64导出的电子签名组件

    效果图 准备工作 组件内用到elementPlus,vue-esign组件,使用前提前安装好. 组件代码 <template> <!-- 签名容器 --> <div cl ...

  10. DevOps系列——Jenkins私服

    DevOps基础设施较多,所以客官不要太着急,要有个"渐进明细"的过程,前面说了GitLab,这里再说下Jenkins,这俩算 是较为核心的基础组件,其他组件可选项较多,而这俩的地 ...