H5+Css3文本溢出添加省略号(包括插件)

一、单行 溢出隐藏 添加省略号

p{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
}

二、多行 溢出隐藏 省略号

p{display: -webkit-box;-webkit-box-orient: vertical;/*设置省略号在容器第四行文本后*/-webkit-line-clamp: 4; overflow: hidden;
}

局限性:
  使用webkit的css扩展属性(webkit是私有属性)-webkit-line-clamp
  因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端
  -webkit-line-clamp用来限制在一个块元素显示的文本的行数。限定了在第几行后面增加省略号。超出必须隐藏。
  将height设置为line-height的整数倍,防止超出的文字露出。

三、使用插件

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

原文地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/97101.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Holographic MIMO Surfaces (HMIMOS)以及Reconfigurable Holographic Surface(RHS)仿真

这里写目录标题 Simulation setupchatgpt帮我总结代码 Holographic MIMO Surfaces (HMIMOS)以及Reconfigurable Holographic Surface(RHS)仿真: Simulation setup In this section, we evaluate the performance of …

Git 学习笔记 | 安装 Git 及环境配置

Git 学习笔记 | 安装 Git 及环境配置 Git 学习笔记 | 安装 Git 及环境配置安装 Git配置 Git查看配置 Git 学习笔记 | 安装 Git 及环境配置 安装 Git 官方网站:https://git-scm.com/ 官网下载太慢,我们可以使用淘宝镜像下载:https://regist…

信号量机制之整型信号量,记录型信号量

1.信号量机制 用户进程可以通过使用操作系统提供的一对原语来对信号量进行操作,从而很方便的实现了进程互斥、进程同步。 1.信号量 信号量其实就是一个变量(可以是一个整数,也可以是更复杂的记录型变量),可以用一个信号量来表示…

DRM全解析 —— CRTC详解(4)

接前一篇文章:DRM全解析 —— CRTC详解(3) 本文继续对DRM中CRTC的核心结构struct drm_crtc的成员进行释义。 3. drm_crtc结构释义 (21)struct drm_object_properties properties /** properties: property tracking …

网络中的一些基本概念

数据共享本质是网络数据传输 ,即计算机之间通过网络来传输数据,也称为 网络通信 。 根据网络互连的规模不同,可以划分为局域网和广域网。 局域网 LAN 局域网,即 Local Area Network ,简称 LAN 。 Local 即标识了局…

Lua系列文章(1)---Lua5.4参考手册学习总结

windows系统上安装lua,下载地址: Github 下载地址:https://github.com/rjpcomputing/luaforwindows/releases 可以有一个叫SciTE的IDE环境执行lua程序 1 – 简介 Lua 是一种强大、高效、轻量级、可嵌入的脚本语言。 它支持过程编程, 面向对…

【C语言】结构类型的定义和使用

目录 1.结构体(struct)类型 2.结构标记 3.typedef 4.定义结构数组的方法 5.调用结构数组的方法 6.将结构体传入函数 7.结构体使用实例 1.结构体(struct)类型 在C语言中,结构体(struct&#xf…

前端el-select 单选和多选

el-select单选 <el-form-item label"部门名称" prop"departId"><el-select v-model"dataForm.departId" placeholder"请选择" clearable:style{ "width": "100%" } :multiple"false" filtera…

接口自动化测试框架(pytest+allure+aiohttp+ 用例自动生成)

近期准备优先做接口测试的覆盖&#xff0c;为此需要开发一个测试框架&#xff0c;经过思考&#xff0c;这次依然想做点儿不一样的东西。 接口测试是比较讲究效率的&#xff0c;测试人员会希望很快能得到结果反馈&#xff0c;然而接口的数量一般都很多&#xff0c;而且会越来越…

【ARM CoreLink 系列 5 -- CI-700 控制器介绍 】

文章目录 1.1 什么是 CI-700?1.1.1 关于 CI-7001.1.2 CI-700 特点1.2 全局配置参数1.2.1 寻址能力1.3 组件和配置1.3.1 CI-700 互联的结构1.3.2 Crosspoint(XP)1.3.3 外部接口1.4 组件(Components)1.1 什么是 CI-700? CI-700是一种AMBA 5 CHI互连,具有可定制的网状拓扑结构…

<HarmonyOS第一课>ArkTS开发语言介绍——闯关习题及答案

判断题 1.循环渲染ForEach可以从数据源中迭代获取数据&#xff0c;并为每个数组项创建相应的组件。&#xff08; 对 &#xff09; 2.Link变量不能在组件内部进行初始化。&#xff08; 对 &#xff09; 单选题 1.用哪一种装饰器修饰的struct表示该结构体具有组件化能力&#…

Maven 下载安装配置

Maven 下载安装配置 下载 maven maven 官网&#xff1a;https://maven.apache.org/ maven 下载页面&#xff1a;https://maven.apache.org/download.cgi 安装 maven 将下载的apache-maven.zip文件解压到安装目录 将加压后的apache-maven目录改名为maven maven 配置环…

Kafka 高可用

正文 一、高可用的由来 1.1 为何需要Replication 在Kafka在0.8以前的版本中&#xff0c;是没有Replication的&#xff0c;一旦某一个Broker宕机&#xff0c;则其上所有的Partition数据都不可被消费&#xff0c;这与Kafka数据持久性及Delivery Guarantee的设计目标相悖。同时Pr…

threejs 透明贴图,模型透明,白边

问题 使用Threejs加载模型时&#xff0c;模型出现了上面的问题。模型边缘部分白边&#xff0c;或者模型出现透明问题。 原因 出现这种问题是模型制作时使用了透明贴图。threejs无法直接处理贴图。 解决 场景一 模型有多个贴图时&#xff08;一个透贴和其他贴图&#xff0…

笔记01:随机过程——随机游动

一、伯努利随机过程 1. n次伯努利实验中&#xff08;x1&#xff09;发生的总次数Yn&#xff1a; (二项分布) 2. 伯努利实验中事件第一次发生的时间L1&#xff1a; &#xff08;几何分布&#xff09; 3. n次伯努利实验中事件第k次发生的时间Lk&#xff1a; &#xff08;帕斯卡分…

list的模拟实现

全部代码 #pragma once namespace HQJ {template<class T>struct __list_node//节点类{T __data;__list_node<T>* __prev;__list_node<T>* __next;__list_node(const T& x T())//由于不知道要存储的数据类型&#xff0c;使用匿名对象进行初始化:__data…

HiveServer2 Service Crashes(hiveServer2 服务崩溃)

Troubleshooting Hive | 5.9.x | Cloudera Documentation 原因&#xff1a;别人用的都好好的&#xff0c;我的集群为什么会崩溃&#xff1f; 1.hive分区表太多(这里没有说具体数量。) 2.并发连接太多&#xff0c;我记的以前默认是200个连接 3.复杂的hive查询访问表的的分区…

(一)实现一个简易版IoC容器【手撸Spring】

一、前言 相信大家在看本篇文章的时候&#xff0c;对IoC应该有一个比较清晰的理解&#xff0c;我在这里再重新描述下&#xff1a;它的作用就是实现一个容器将一个个的Bean&#xff08;这里的Bean可以是一个Java的业务对象&#xff0c;也可以是一个配置对象&#xff09;统一管理…

JetPack系列:001-JetPack概要介绍

文章目录 1. 概念介绍2. 主要内容2.1 框架库2.2 UI界面库 3. 核心思想4. 内容总结 本章回是一起Talk AndroidJetpack吧专栏的第一章回&#xff0c;本章回中主要介绍JetPack的基本概念和编程思想&#xff0c;同时也会介绍它的基础知识。闲话休提&#xff0c;请我们一起Talk Andr…

趣味工具箱小程序源码

趣味工具箱小程序源码&#xff0c;支持功能去水印&#xff0c;精选壁纸&#xff0c;图片压缩&#xff0c;文字生成二维码&#xff0c;图片加水印&#xff0c;模拟来电&#xff0c;手持弹幕&#xff0c;掷骰子…等 使用小工具&#xff0c;一个小程序有几十个功能。 源码下载&am…