当前位置: 首页 > news >正文

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});

原文地址

相关文章:

  • 【用unity实现100个游戏之14】Unity2d做一个建造与防御类rts游戏
  • 这7个AI软件让设计效率飞起,快来收藏 优漫动游
  • windows C 开发
  • freertos信号量之二值信号量
  • C++ - 右值引用 和 移动拷贝
  • NPM 常用命令(九)
  • Java中栈实现怎么选?Stack、Deque、ArrayDeque、LinkedList(含常用Api积累)
  • Docker 日志管理 - ELK
  • C++用hiredis访问redis
  • 目标检测YOLO实战应用案例100讲-基于无人机航拍图像的目标检测
  • 第1次 更多的bash shell命令
  • Matrix卡顿优化之IdleHandlerLagTracer源码分析
  • C#上位机——根据命令发送
  • 专业PDF编辑阅读工具PDF Expert mac中文特点介绍
  • 浅析如何在抖音快速通过新手期并积累粉丝
  • 【Vue3】定义全局变量和全局函数
  • leetcode 886. 可能的二分法
  • Go Gin Gorm Casbin权限管理实现 - 3. 实现Gin鉴权中间件
  • 大语言模型之十四-PEFT的LoRA
  • 基于安卓android微信小程序的旅游app系统
  • 习近平同巴西总统卢拉共同会见记者
  • AI观察|从万元到百万元,DeepSeek一体机江湖混战
  • 江西省司法厅厅长张强已任江西省委政法委分管日常工作副书记
  • “拼好假”的年轻人,今年有哪些旅游新玩法?
  • 上海杨浦:优秀“博主”购房最高可获200万补贴
  • 奥园集团将召开债券持有人会议,拟调整“H20奥园2”本息兑付方案