目前在使用的时候必须是-webkit-line-clamp 这个是因为line-clamp是CSS3提出的,目前的兼容性不好。 虽然caniuse上很好! Chrome实测: 举例 <!DOCTYPEhtml>Documentdiv{width:300px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}大家仔细看有啥不同,~~一个是广告,一...
这时就是line-clamp发挥作用的地方了。 下面我们来看看line-clamp属性的兼容性 对于无法支持的浏览器,我们可以使用JavaScript来实现效果。
给p::after添加渐变背景可避免文字只显示一半。 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:…);兼容ie8需要将::after替换成:after。 效果:
1. 确认-webkit-line-clamp属性的使用环境和兼容性-webkit-line-clamp是一个非标准的CSS属性,主要用于限制在一个块元素显示的文本的行数。它主要被WebKit(如Chrome和Safari)和一些基于WebKit的浏览器支持。因此,如果你在非WebKit浏览器(如Firefox或IE)中使用,这个属性可能不会生效。 解决方案:确保你在支持-webkit-...
三、兼容性 这个属性 目前仅支持webkit浏览器,比较合适WebKit浏览器或移动端(移动端绝大部分是WebKit内核的浏览器) 跨浏览器兼容的方案 A:比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现 p{position:relative;line-height:1.4em;height:4.2em;overflow:hidden; ...
浏览器兼容性问题:虽然Tailwind CSS旨在提供跨浏览器兼容性,但某些特性可能在某些浏览器中不起作用。请确保您正在使用的浏览器支持line-clamp属性。 其他CSS覆盖:可能有其他CSS规则或样式表覆盖了您应用的Tailwind CSS样式。检查其他CSS文件或样式表,看看是否有与Tailwind CSS类名冲突的规则。 Tailwind CSS CDK:如果您...
官方也提出了一个line-clamp作为标准Css3属性,但是当前这个时间节点并未实现,而且就算实现了,其实也比较难向后兼容的,所以实用性暂时不强。 好在按预期行数显示省略号这个功能还是比较常用的,所以网上的解决方案也比较丰富。 简单陈列几个供大家参考: clamp.js ...
兼容性强,支持所有主流的 PC,移动端浏览器 支持自定义带渐变的文字省略样式 由于省略样式区域本质上是一个浮动盒子,所以这里我们需要通过渐变来防止穿帮,对于某些背景颜色比较复杂的区域,或者更强的一些自定义省略样式需求时(比如省略样式定义为一张箭头或图片等),这种方案开始显得力不从心了。
可以用Chrome浏览器试试,看你用的FireFox,应该是CSS兼容性问题 回复 2019-04-14 09:44:10 提问者 weixin_慕码人5331449 回复 Sam #3 感谢老师!已经解决了!真的是浏览器的问题,因为开发菜单栏时Chrome突然怎么点都没反应,后来一直如此,所以后来我都用的FireFox调试,刚才我又试了一下,可能兼容了PC端,Chrom...
如下图: 然而,有的需求要求内容允许换行,但行数有限,当行数超过既定的行数的时候,才在内容的最后一行用点点点来替代未显示的内容。如下图: 此时,下面的这个css属性可以帮助你实现这个需求: -webkit-line-clamp:2; // 该属性存在兼容性问题