如果-webkit-line-clamp在你的环境中不生效,你可以考虑使用其他方法来实现多行文本截断效果。例如,使用JavaScript来动态计算文本高度并截断多余的文本,或者使用伪元素和渐变背景来模拟省略号效果。以下是一个使用纯CSS实现的替代方案示例: css .content { font-size: 14px; color: #4A4A4A; overflow: hidden; line...
方案一:原因可能是因为代码环境的关系-webkit-box-orient被过滤掉了 autoprefixer 这个关键字可以免除被过滤的动作。但是这个方法在我的项目里不生效,大家可以试下。 .text{font-size:30px;line-height:32px;color:red;overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:2;/*! auto...
网上查资料看的说原因是: 会被打包的postCSS这个插件去掉的,好像是因为这个属性不是规范。 可以写在行内style里面,这样就不会被插件去掉了。 解决方法: 第一种直接设置css: 1 2 3 /*!autoprefixer: off */ -webkit-box-orient: vertical; -webkit-line-clamp: 3; /*!autoprefixer: on */ /*! autopre...
正如各种董事会所建议的那样,我使用了 webkit-line-clamp 策略,如下所示 .line-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; } 所以我没有看到第四行末尾的省略号,但是如果我进入开发人员工具并对元素中的 CSS 进行一...
在项目中要实现多行省略,-webkit-line-clamp: 2;打包后不生效,使用下面的方法: 1、安装依赖这个依赖:npm i -S optimize-css-assets-webpack-plugin 2、并且注释掉webpack.prod.conf.js中的一段代码:
实际场景中，有很多现象不能单纯的进行定量描述，只能用例如“出现”“不出现”这样的形式进行描述，这种...
-webkit-line-clamp显示无效的属性名称,同时由于之前目录列表显示过长,长度超出屏幕宽度,我自己加了个宽度的条件,若把宽度去掉,手机端还是会超长,请问要怎么改?源码已上传到GitHub:https://github.com/Kapokopen/vue-imooc-ebookweixin_慕码人5331449 2019-04-13 19:18:29 ...
-webkit-line-clamp显示无效的属性名称,同时由于之前目录列表显示过长,长度超出屏幕宽度,我自己加了个宽度的条件,若把宽度去掉,手机端还是会超长,请问要怎么改?源码已上传到GitHub:https://github.com/Kapokopen/vue-imooc-ebookweixin_慕码人5331449 2019-04-13 19:18:29 ...
问题: webkit-line-clamp在开发环境有效而在线上环境无效(chrome) 线上环境: 开发环境: 而在segmentfault思否首页的文章列表展示中,它的也是使用这种方式,而且可以生效。原因未知。