本代码展示最多显示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. Vue + Element 实现按钮指定间隔时间点击

    1.业务需求 需要加一个按钮,调用第三方API,按钮十分钟之内只能点击一次,刷新页面也只能点击一次 2.思路 加一个本地缓存的时间戳,通过时间戳计算指定时间内不能点击按钮 3.实现 1)vue页面 & ...

  2. 961. 重复 N 次的元素

    地址:https://leetcode-cn.com/problems/n-repeated-element-in-size-2n-array/ <?php /** 在大小为 2N 的数组 A ...

  3. DeepSeek在M芯片Mac上本地化部署

    在 Mac 上使用 Ollama 运行 DeepSeek-R1,并通过 Open-WebUI 提供 Web 端访问. 1. 安装 Ollama Ollama官方:https://ollama.com/ ...

  4. 考勤运行提示‘Length of values (115) does not match length of index (116) >>> ’

    源码 df['餐补'] = money_list 解决思路: 1.分别打印输出两个字段长度 本来以为是每个月的文件格式不一致导致有的文件好用有的文件不好用 经过耐心查看代码 前面的算法统计有一个本应该 ...

  5. MySQL 8.0 误删了root用户怎么办

    MySQL 8.0 误删了root用户怎么办 修改配置文件 修改配置文件,让其可以无账号登录 默认的文件为: /etc/my.cnf 添加:skip-grant-tables 重启服务 service ...

  6. Linux netstat 命令查看80端口状态

    Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Membershi ...

  7. 【工具篇】git常用命令分享

    1. 配置 1.1 设置全局用户名和邮箱 git config --global user.name xxx git config --global user.email xxx@xxx.com 上述 ...

  8. 【Node.js】npm配置国内镜像源

    [服务器]npm配置国内镜像源 零.问题 配置Node.js的HTTPS的时候,下载不了 一.解决 这里使用的是淘宝的镜像: npm config set registry https://regis ...

  9. Quartz.NET - 教程 2: 作业和触发器

    译者注: 目录在这 Quartz.NET 3.x 教程 原文在这 Lesson 2: Jobs And Triggers Quartz API Quartz API 的主要接口和类如下: ISched ...

  10. nodejs读写yaml

    nodejs读写yaml npm install -g js-yaml // read.js const fs = require('fs'); const yaml = require('js-ya ...