clamp.js 使用

使用方式

//Single line
$clamp(myHeader, {clamp: 1});//Multi-line
$clamp(myHeader, {clamp: 3});//Auto-clamp based on available height
$clamp(myParagraph, {clamp: 'auto'});//Auto-clamp based on a fixed element height
$clamp(myParagraph, {clamp: '35px'});

实质是对元素设置 style="overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 5;"

但是存在兼容性火狐，IE 不适用，如果你的项目不考虑兼容的话可以用，

IE效果图

火狐效果图

谷歌效果图

更多使用方法可以访问 https://joe.sh/clamp-js

转载于:https://my.oschina.net/agions/blog/2875410

clamp.js 使用相关推荐

基于clamp.js封装vue指令，处理多行文本的溢出
最近做项目时,遇到了一个需求:要求div里文本在两行显示,div的宽度是固定的,如果溢出的话就显示省略号.单行文本的溢出问题,我们都很熟悉,只要添加以下css属性就ok: overflow: hidd ...
clamp.js用法初窥
众所周知,要实现文本溢出显示省略号可以用text-overflow:ellipsis;但是只能显示单行文本: 多行文本可以用-webkit-line-clamp:n;但是这是webkit的私有属性,只 ...
用JS解决多行溢出文本的省略问题
前言在项目开发过程中,经常会遇到溢出文本的省略问题.根据需求,可以把文本省略分为单行文本省略和多行文本省略两类. 单行文本的省略,现在css样式 text-overflow 已经有兼容性很好的样式支 ...
js获取display的值_JS实现多行溢出省略号思路
说起多行溢出省略号,用CSS实现最简单 .one-line { display: -webkit-box !important; overflow: hidden; text-overflow: el ...
文本超出隐藏综合整理
最近的开发中,文本超出隐藏总是一个没有得到完整解决的问题,现在整理一遍,虽然也没有得出一劳永逸的方案. PURE CSS 单行隐藏需要限制 width overflow: hidden; text- ...
【css】文字溢出，显示省略符号（...）
前言 CSS3 文字溢出,显示省略符号需要区分情况进行处理:可分为单行和多行的情况. 单行文字溢出假设有这样的需求,如图: 那么可以用如下代码实现: <!DOCTYPE html> &l ...
scanner一次输入多行_记一次项目复盘，技术盘点（易忽略的细节）
20%的工作汇报将决定你80%的工作效率和工作成果. 前言虽然之前有好几次技术分享,但是真正的项目复盘还是第一次做,从业务到技术,全方面的梳理.从不同的开发视角去刨析业务和技术. 传统项目开发,后端 ...
amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line {border: ...

clamp.js 使用

clamp.js 使用相关推荐

最新文章

热门文章