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

原文地址

相关推荐
lewis_lk1 分钟前
ReactJs状态迷思:从"常量"到"闭包陷阱"的底层逻辑
前端·react.js
尘世中一位迷途小书童2 分钟前
在 Cesium 上画全球网格:我们怎么把 GeoSOT 接到瓦片调度上
前端·javascript·前端框架
aixingpan8 分钟前
aixingpan.cn API开发文档:api_docs_trichart_natal_progression_ter_transit2接口指南
前端·php
liuyt202218 分钟前
【javaweb】day3
前端
CoderYanger28 分钟前
Java EE 进阶:2.3 JavaScript
java·开发语言·前端·javascript·css·职场和发展·java-ee
恋猫de小郭29 分钟前
ADB Wi-Fi 2.0 ,Android 17 把无线调试的连接链路重新做了一遍
android·前端·flutter
薛一半30 分钟前
React路由初始
前端·react.js·前端框架
问心无愧051343 分钟前
ctf show web 178
前端·笔记
岁岁种桃花儿1 小时前
Vue组件化编程第二篇:非单位件组件
前端·javascript·vue.js
晓得迷路了1 小时前
栗子前端技术周刊第 146 期 - React 19.3、jQuery 1.0 20 周年、Bun 1.4.2...
前端·javascript·react.js