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

原文地址

相关推荐
拉不动的猪6 小时前
requestAnimationFrame 与 JS 事件循环:宏任务执行顺序分析
前端·javascript·面试
步步为营DotNet6 小时前
深度解析C# 11的Required成员:编译期验证保障数据完整性
java·前端·c#
han_6 小时前
开发提效利器 - 用好Snippets
前端·javascript·visual studio code
J船长6 小时前
Firebase CLI 一直关联失败
前端
wuli_滔滔6 小时前
DevUI云控制台实战:多云管理平台前端架构解密
前端·架构·devui·matechat
深耕AI7 小时前
【wordpress系列教程】02 Blocksy主题
运维·服务器·前端
我笔记8 小时前
vue 子父调用
前端·javascript·vue.js
毕设源码-朱学姐9 小时前
【开题答辩全过程】以 基于vue.js的校园二手平台为例,包含答辩的问题和答案
前端·javascript·vue.js
m0_471199639 小时前
【JavaScript】Set 和 Map 核心区别与实战用法(ES6 集合全解析)
前端·javascript·es6
hoiii1879 小时前
MATLAB中主成分分析(PCA)与相关性分析的实现
前端·人工智能·matlab