首页 > 其他分享 >JS+CSS多行文本显示“更多”

JS+CSS多行文本显示“更多”

时间:2023-12-20 12:11:25浏览次数:34  
标签:多行 16px span temp color CourseDesc JS height CSS

本代码展示最多显示3行,每行行高16px,3行总高48px,4行总高64px

当文本行数大于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>');
}

  

 

标签:多行,16px,span,temp,color,CourseDesc,JS,height,CSS
From: https://www.cnblogs.com/kandyvip/p/17916254.html

相关文章

  • js 处理对象数组 + map 筛选出指定字段数据 + filter过滤重复数据/指定数据
    constres=[{id:1,name:'zhangsan',age:16,gender:0},{id:1,name:'zhangsan',age:16,gender:0},{id:2,name:'lisi',age:20,gender:1}];获取res中的id和name/*[{"id&......
  • Koa.js 中的日志管理
    日志日志用来记录程序的运行信息。开发服务端程序,必须集成日志管理的功能,一旦系统出现故障可以及时排查问题所在。日志一般分为:访问日志:记录系统的访问记录。运行日志:输出系统运行时的一些信息错误日志:记录系统出错的状态一般我们都是通过nginx做负载均衡,它具备了记录访问日志的......
  • 15.高阶定位-CSS 定位与原生定位
    目录原生定位cssselector定位原生定位官网地址元素属性定位组合定位#ID定位driver.find_element_by_android_uiautomator('\newUiSelector().resourceId("<element-ID>")')#组合定位driver.find_element_by_android_uiautomator('\newUiS......
  • Newtonsoft.Json.JsonReaderException:“Bad JSON escape sequence: \*. Path '****'
    测试Json字符串msg:{"field1":"\\\9527\","field2":"\\\\\data\\","field3":"\r\n\\\G\\\d\\\","field4":"TESTTEST\\1TEST\\\GTEST\\\\GTEST2\\\\\TEST3\\......
  • js实现el-select选中的文本,一键复制
    <divclass="invite-buttom">请选择要复制的网站:<el-selectv-model="webValue"placeholder="请选择要复制的网站"><el-optionv-for="iteminformUrl.webInviteUrl"......
  • npmjs.com 网站
    npmjs.com提供了许多对日常开发非常有用的功能:包管理:你可以使用npm来安装、升级、卸载包。这些包可以是全局安装的,也可以是本地安装的。依赖控制:npm可以帮助你管理项目的依赖,使得代码部署变得更加容易。发布和维护包:如果你是一个开发者,npm也提供了命令行工具,让你......
  • 在Mapbox-gl-js中添加自定义图层
    在Mapbox-gl-js中添加自定义图层前言一、制作geojson地图二、使用Tippecanoe将geojson转换成vectortile(.pbf)文件三、使用mapbox-gl-js显示三、Mapbox-gl-js中根据矢量数据的属性过滤显示前言本文说明如何制作自定义的地图数据,并使用mapbox-gl-js进行显示一、制作geoj......
  • JsonNode、ObjectNode和ArrayNode
    我个人不喜欢fastjson,但是项目中很多地方用到json字符串转换对象但又不想创建pojo所以使用jackson的JsonNode、ObjectNode和ArrayNode就非常好用,万能对象,这三个对象是非常全面的,感兴趣的可以看下源码JsonNode只读,通常由ObjectMapper解析json字符串得到ObjectNode可修改,继承......
  • 【力扣】-9. 回文数|刷题打卡-JS
    给你一个整数 x ,如果 x 是一个回文整数,返回 true ;否则,返回 false 。回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数。例如,121 是回文,而 123 不是。示例1:输入:x=121输出:true示例 2:输入:x=-121输出:false解释:从左向右读,为-121。从右向左读,为121-。......
  • Parallax.js:实现自适应智能设备方向的视差效果
    哈喽!大家好!我是程序视点的小二哥。今天给大家分享一款功能非常强大的javascript视觉差特效引擎插件:Parallax.js。Parallax.js简介Parallax.js是一个简单的,轻量级的视差引擎。你可以将它作为作为jQuery或Zepto插件来使用,也可以以纯JS的方式来使用。最-最-最厉害的是它可以对智......