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

原文地址

相关推荐
每天吃饭的羊11 分钟前
LeetCode JS 常用辅助数据结构
前端
丑过三八线15 分钟前
【无标题】
前端
yuananyun21 分钟前
APP 图标规范与设计全攻略:iOS/Android/Web 一次设计多端合规,快速出图
android·前端·ios
李剑一22 分钟前
面试问网络?问到我的软肋了。面试官:讲一下HTTP强缓存与协商缓存
前端·面试
小雨下雨的雨25 分钟前
近视度数模拟器鸿蒙PC Electron框架技术实现详解
前端·javascript·electron
喜欢踢足球的老罗30 分钟前
逆向 WhatsApp Web:前端 SDK 深度剖析与 Chrome 插件实战指南
前端·chrome
roseonly_h31 分钟前
如何将钉钉微应用在浏览器打开
前端·钉钉
小雨下雨的雨40 分钟前
鸿蒙PC用Electron框架——Canvas蜡笔抖动效果实现技术深度解析
前端·javascript·华为·electron·鸿蒙系统
ZC跨境爬虫42 分钟前
跟着 MDN 学CSS day_49:定位实例练习从入门到精通
前端·css·学习
前端小万42 分钟前
用AI两小时开发上架的小程序,单日新增用户173
前端·微信小程序