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

原文地址

相关推荐
Momo__几秒前
前端 Code Review 实战:识别 AI 写代码的 15 个常见坑
前端·vibecoding
拖孩5 分钟前
全程 AI 写的小程序,刚接上会员虚拟支付,上线第二天就有人真金白银买单了|双签名、定价、iOS 的坑我全踩了一遍
前端·后端·微信小程序
小蚂蚁i6 分钟前
React 基础
前端
ZoeLandia8 分钟前
TypeScript 02:interface、type 与类型收窄
前端·typescript
Bode_200210 分钟前
构建制造业知识库
前端·智能制造系统·业务流程再造
cindershade13 分钟前
接口协作的交接面:让并行开发从约定走到发布
前端
JAVA老架构AI智能化14 分钟前
多图叠加比对
前端·javascript·chrome
ShineWinsu16 分钟前
对于HTML:HTML常见标签的解析—上
前端·面试·html·浏览器·标签·图片·超链接
行者全栈架构师17 分钟前
【鸿蒙心迹】从手机到平板、折叠屏——多端适配自查清单与踩坑实录(HarmonyOS 7.x)
前端·算法·架构
百度一下吧1 小时前
HTML5 新增标签与 Web Components 使用指南
前端·html·html5