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

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

css 复制代码
p{
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

二、多行 溢出隐藏 省略号

css 复制代码
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的整数倍,防止超出的文字露出。

三、使用插件

javascript 复制代码
var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

原文地址

相关推荐
小旋风0123414 小时前
uniapp开发app解决视频层级太高的问题(subNvue方法)
前端·uni-app·音视频
Jinuss14 小时前
源码分析之React中useCallback和useMemo
前端·javascript·react.js
maxmaxma14 小时前
ROS2机器人少年创客营:Python第一课
前端·python·机器人
吃西瓜的年年14 小时前
react(二)useEffect 和 useRef
前端·react.js·前端框架
RDCJM14 小时前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
LZQ <=小氣鬼=>14 小时前
React 插槽(Slot)
前端·javascript·react.js
前端老石人14 小时前
HTML 内容分组终极指南:从语义化标签到现代 Web 结构
前端·html
大转转FE14 小时前
转转前端周刊第191期: 淘宝闪购 AI Agent 的秒级响应记忆系统
前端·人工智能
怪我冷i14 小时前
在win11进行Rust Web 开发,采用Salvo框架
开发语言·前端·rust
candyTong15 小时前
Claude Code 是怎么跑起来的:从 Agent Loop 理解代理循环实现
前端·后端·ai编程