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

原文地址

相关推荐
糕冷小美n7 小时前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
小哥不太逍遥7 小时前
Technical Report 2024
java·服务器·前端
沐墨染7 小时前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code
anOnion7 小时前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
threerocks7 小时前
前端将死,Agent 永生
前端·人工智能·ai编程
问道飞鱼8 小时前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
爱上妖精的尾巴8 小时前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
Aliex_git9 小时前
浏览器 API 兼容性解决方案
前端·笔记·学习
独泪了无痕9 小时前
useStorage:本地数据持久化利器
前端·vue.js
程序员林北北10 小时前
【前端进阶之旅】JavaScript 一些常用的简写技巧
开发语言·前端·javascript