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

原文地址

相关推荐
HelloReader4 分钟前
Qt Quick vs Qt Widgets如何选择适合你的 UI 技术路线(五)
前端
cmd6 分钟前
吃透 ES6 Generator:yield/next/yield* 核心用法详解
前端·javascript
我叫黑大帅8 分钟前
🎯 DOM 事件:onclick VS addEventListener('click')区别
前端·javascript·面试
踩着两条虫10 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(二十二):CLI与工具链之开发与生产工作流
前端·vue.js·ai编程
Ankkaya13 分钟前
大师助我,electron-hiprint 源码梳理
前端·vue.js
风止何安啊14 分钟前
🪝 别再重复造轮子了!教你偷懒:在 React 自定义 Hook
前端·react.js·面试
踩着两条虫14 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(二十三):API与参考之Engine API 参考
前端·vue.js·ai编程
Moment15 分钟前
开源一年,我的 AI 全栈项目 AI 协同编辑器终于有 1.1 k star了 😍😍😍
前端·后端·面试
爱学习的小囧15 分钟前
VCF 集群部署灵活组合:单节点与高可用配置完全指南
java·服务器·前端
967719 分钟前
AJAX和Axios理解和关系
前端·ajax·okhttp