扫码关注官方订阅号
现在有个文言部分在手机上显示,想让他在手机上超过三行显示一个展开/收起的按钮(按钮展开收起功能已经实现),现在该怎么判断这个文言是不是超过了三行呢?有什么好点的办法吗大神们,请教!!
小伙看你根骨奇佳,潜力无限,来学PHP伐。
.xxx { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 20px; max-height: 60px; }
应该是判断字符长度吧,不过不同的手机,三行显示的字符又不一样.... 或者可以先容内容全部显示,判断高度,然后做隐藏
虽然上面的2个思路都可以实现,好像都有点坑的味道...
可以放一个p在左侧出屏幕的地方,比如left=-1000px,宽度和你需要显示文字的p的宽度保持一致。然后把要显示的内容放到出屏幕的那个p中。因为你是知道字体大小或者行高的,只要获取一下出屏幕的那个p的高度和你三行文字应该有的高度做一个比较就知道是不是超过三行了。
先不给他 line-clamp;然后获取p css('line-height').然后用p的高度除 lin-height 如果小于3就是三行以内
function getLineTotal(el) { let styles = window.getComputedStyle(el, null); let totalHeight = styles.height.replace('px', ''); let lineHeight = styles.lineHeight.replace('px', ''); return Math.ceil(totalHeight / lineHeight); }
思路: 利用计算属性获取文本所在元素节点的盒子高度和行高, 然后高度 / 行高.
注意: border-box和padding这些属性的设置可能会干扰你的计算结果.
border-box
padding
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
.xxx {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-height: 20px;
max-height: 60px;
}
应该是判断字符长度吧,不过不同的手机,三行显示的字符又不一样....
或者可以先容内容全部显示,判断高度,然后做隐藏
虽然上面的2个思路都可以实现,好像都有点坑的味道...
可以放一个p在左侧出屏幕的地方,比如left=-1000px,宽度和你需要显示文字的p的宽度保持一致。然后把要显示的内容放到出屏幕的那个p中。因为你是知道字体大小或者行高的,只要获取一下出屏幕的那个p的高度和你三行文字应该有的高度做一个比较就知道是不是超过三行了。
先不给他 line-clamp;然后获取p css('line-height').然后用p的高度除 lin-height 如果小于3就是三行以内
思路: 利用计算属性获取文本所在元素节点的盒子高度和行高, 然后高度 / 行高.
注意:
border-box
和padding
这些属性的设置可能会干扰你的计算结果.