-webkit-line-clamp 多行文字溢出...

最新推荐文章于 2024-01-29 14:43:38 发布
最新推荐文章于 2024-01-29 14:43:38 发布
阅读量498 收藏
点赞数
分类专栏： css 文章标签： 多行文本溢出 行高 抖动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37894619/article/details/62233056
版权

近日发现在写多行溢出省略号显示时，发现一个bug，就是比如说，我现在要超过2行省略号显示，结果你猜出现了什么诡异的事，省略号出现时总体的高度居然要比单独2行的高度加起来少那么2个px。。。。导致动态换数据的时候出现抖动~~~
我类个去，见鬼了，小编调了好久都没弄好，最后发现应该是浏览器的bug，因为chrome 下是好的，而微信开发者工具却，，，呵呵了。

图1
这里写图片描述

图2
这里写图片描述

真伤脑经。。。。
后面直接给这行文字加了个高度height: 3em; 就阔以了，，但总觉得这个办法不是很灵活，不知道大家有什么好办法

屠苏V
关注
专栏目录
关于 -webkit-line-clamp 详解
weixin_30443731的博客
08-25 5349
最近需要做个商品列表，在手机屏幕不太一样的市场里，如何做到列表中刚刚好显示2行，偶然间发现淘宝的手机版有用到-webkit-line-clamp来实现这种效果 限制在一个块元素显示的文本的行数。 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 为了实现该效果，它需要组合其他外来的WebK...
微信小程序display: -webkit-box设置多行文本溢出，文本前多出一行空行
qq_43735767的博客
06-18 1027
做一个多行文本溢出效果
css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)
09-27
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中，不过我们经常在文本溢出中使用这个参数
-webkit-line-clamp 实现限制文字显示多行，多余的用...
weixin_34051201的博客
06-16 138
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient...
-webkit-line-clamp
qq_42622907的博客
11-01 194
-webkit-line-clamp用于限制块元素中文本行数，必须结合以下样式方可生效 display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow: ellipsis; ...
css控制文字超出内容显示...（-webkit-line-clamp 多行文字溢出...兼容火狐ie浏览器）...
06-06
如果你想要多行文字溢出时的显示方式，可以使用-webkit-line-clamp属性。但是，这个属性只在WebKit浏览器中生效，如果你需要兼容Firefox和IE，可以使用一些JavaScript库来实现，比如clamp.js。 以下是一个使用了...
移动端的text-overflow多行文本溢出显示省略号(…)
12-10
首先，对于基于WebKit的浏览器（如Safari和Chrome，以及大部分移动端浏览器），我们可以利用WebKit的私有属性`-webkit-line-clamp`。这是一个不受官方CSS规范支持的属性，用于限制在一个块级元素中显示的文本行数。...
-webkit-line-clamp超过两行就出现省略号
weixin_30952103的博客
07-18 112
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orie...
-webkit-line-clamp 是什么？
最新发布
m0_56699208的博客
01-29 2495
虽然自动添加的省略符号是 “…”, 但你可以使用伪元素和content属性来创建自定义的省略符号或文本。content: '阅读更多';bottom: 0;right: 0;
Vue项目打包后css中的-webkit-line-clamp这个属性失效
hu104160112的博客
12-29 870
多行省略，可以使用-webkit-line-clamp属性，打包后却失效了 .htcon { margin-top: 5px; font-size: 13px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; over
webkitlineclamp css3,CSS webkit-line-clamp用法及代码示例
热门推荐
weixin_33251169的博客
08-03 1万+
-webkit-line-clamp属性用于限制块容器可能包含的行数。仅当显示属性设置为“ -webkit-box”或“ -webkit-inline-box”并且“ -webkit-box-orient”属性设置为“垂直”时，此属性才有效。用法:-webkit-line-clamp:none | integer | initial | inherit属性值：none:用于指定内容不会被钳位。它是...
2021-03-23
weixin_41612533的博客
03-23 270
-webkit-line-clamp -webkit-line-clampCSS 属性 可以把块容器中的内容限制为指定的行数. 它只有在display属性设置成-webkit-box或者-webkit-inline-box并且-webkit-box-orient(en-US)属性设置成vertical时才有效果 在大部分情况下,也需要设置overflow属性为hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsi...
-webkit-line-clamp限制多行文字
weixin_43990532的博客
07-06 164
需要添加以下四行代码 display:-webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
css中限制行数( -webkit-line-clamp)出现三个点在打包时失效的解决方案
关中刀客在青岛
04-10 2524
在基于-webkit内核的浏览器中，多行文本限制行数，比如超过2行时，第二行结尾用三个点表示，实现如下： h4{ display: -webkit-box; overflow: hidden; -webkit-line-clamp:2; -webkit-box-orient: vertical; } 可以看出，后面两行有-webkit 前缀，就是这个属...
-webkit-line-clamp属性对动画的影响
u010007013的博客
07-01 676
如果html盒子使用了-webkit-line-clamp属性，那么要注意可能会对盒子的动画属性产生影响。 举个例子： 如果一个div设置了style: height：100px;-webkit-line-clamp:6;transition:height 0.1s ease 某一时刻将div的style修改为： height：200px;-webkit-line-clamp:100; 现在想让d...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值