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

原文地址

相关推荐
徐小夕10 小时前
表格、文档、甘特、大屏、表单一站打通:pxcharts超级表格4.0正式上线!
前端·算法·github
用户5944041035611 小时前
Vue3 + TypeScript + Leaflet.js 实战:构建企业级地理信息应用
前端
kyson_11 小时前
一次搭好 ESLint + Prettier + Husky + lint-staged 前端代码工作流
前端
zhifou12345611 小时前
Vue基础(二)
前端·javascript·vue.js
两只羊ovo11 小时前
手写一个最小版 Claude Code:从任务拆解到 Agent Loop 转起来
前端
给个offer养家糊口11 小时前
抽离 elpis npm 包
前端
默_笙11 小时前
🙃 我让爬虫终于看到了我的网站,后端同事说"这也行?"(下):App Router 全栈实战
前端·javascript
葡萄城技术团队12 小时前
一个单元格放置两个日期选择器:用 SpreadJS CellButtons 录入日期范围
前端
马可家的菠萝13 小时前
自动保存已经有了,为什么笔记软件还需要“历史版本”?
前端·后端·架构
半个落月13 小时前
从 "use client" 到 Route Handler:用 Todos 理解 Next.js 水合与全栈请求
前端·react.js·next.js