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

原文地址

相关推荐
Sgf2275 小时前
如何阅读 React 源码:系统化学习指南
前端·react.js·前端框架
李剑一5 小时前
解决 Cesium 网络卡顿!5 分钟加载天地图,内网也能流畅用,附完整代码
前端·vue.js·cesium
QD_ANJING5 小时前
3月面大厂前端岗总结笔记(含答案)
前端·javascript·笔记·面试·职场和发展·前端框架·pdf
YimWu5 小时前
面试官:OpenCode Prompt 系统了解吗?
前端·agent·ai编程
百锦再5 小时前
复杂查询中基于代价的连接条件下推实践与思考
前端
广州华水科技5 小时前
如何实现高精度的单北斗GNSS位移监测系统安装?
前端
肉肉不吃 肉5 小时前
Vue Router 路由模式
前端·javascript·vue.js
北寻北爱5 小时前
Vue-Router
前端·javascript·vue.js
肉肉不吃 肉6 小时前
什么是闭包
前端·javascript
窝子面6 小时前
十六、按钮组件
前端