当前位置: 首页 > news >正文

H5+Css3文本溢出添加省略号(包括插件)

一、单行 溢出隐藏 添加省略号

p{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
}

二、多行 溢出隐藏 省略号

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的整数倍,防止超出的文字露出。

三、使用插件

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

原文地址

http://www.lryc.cn/news/186049.html

相关文章:

  • 将休眠镜像文件hiberfil.sys移动到D盘,可以减少C盘好几个G的空间占用
  • YTM32的模数转换器ADC外设模块详解
  • 前端vue学习笔记——Vuex
  • 7个在Github上的flutter开源程序
  • 计算机基础
  • Oracle-ASM实例communication error问题处理
  • gin路由相关方法
  • vue项目 Editor.md使用示例
  • 12.3 实现模拟鼠标录制回放
  • 【计算机网络-自顶向下方法】应用层(SMTP、POP3、DNS)
  • 【Pm4py第八讲】关于Statistics
  • 【Azure 架构师学习笔记】-Azure Data Factory (5) --Data Flow
  • uniapp之ios开发及支付整体流程爬坑记录
  • AutoDL百川大模型体验
  • 蓝桥杯每日一题2023.10.8
  • jmeter,性能测试,Locust
  • opencv图像的直方图,二维直方图,直方图均衡化
  • c++中的map和set
  • Swagger使用详解
  • ToBeWritten之车联网安全中常见的TOP 10漏洞
  • 软考-密码学概述
  • windows 2003、2008远程直接关闭远程后设置自动注销会话
  • iOS BUG UIView转UIImage模糊失真
  • 如何在10分钟内让Android应用大小减少 60%?
  • 网络代理技术:保障隐私与增强安全
  • 数据结构 | (二) List
  • [NewStarCTF 2023 公开赛道] week1 Crypto
  • C语言中文网 - Shell脚本 - 0
  • Transformer预测 | Pytorch实现基于Transformer 的锂电池寿命预测(CALCE数据集)
  • 2023年【通信安全员ABC证】找解析及通信安全员ABC证考试总结