老师我的-webkit-line-clamp无效，且目录列表在电脑端出现了一个滑动条

来源：6-11 自适应布局优化（PC端布局优化）

weixin_慕码人5331449

2019-04-13

-webkit-line-clamp显示无效的属性名称，同时由于之前目录列表显示过长，长度超出屏幕宽度，我自己加了个宽度的条件，若把宽度去掉，手机端还是会超长，请问要怎么改？源码已上传到GitHub：https://github.com/Kapokopen/vue-imooc-ebook
图片描述

写回答

2回答

Sam

2019-04-13

已采纳

你好，运行了一下你的代码，修改以下两处：

EbookSlideContents.vue组件，184行可以注释

.slide-contents-book-title {
         /* 375*85%=318.75-15*2=288.75-10*2=268.75-45=223.75-70=153.75 */
         /* 173.75-10*2=153.75 */
         // width: px2rem(153.75); // 这行注释
         font-size: px2rem(14);
         line-height: px2rem(16);
         @include ellipsis2(2);
       }

218行宽度也可以注释：

.slide-contents-list {
     // width: px2rem(318.75); // 这行也注释
     padding: 0 px2rem(15);
     box-sizing: border-box;

另外，PC端切换到移动端要重新刷新一下页面，因为rem要重新计算

//img.mukewang.com/szimg/5cb1dcfd00018cce09941288.jpg

weixin_慕码人5331449

Sam

感谢老师！已经解决了！真的是浏览器的问题，因为开发菜单栏时Chrome突然怎么点都没反应，后来一直如此，所以后来我都用的FireFox调试，刚才我又试了一下，可能兼容了PC端，Chrome又可以用了

2019-04-14

共3条回复

weixin_慕码人5331449

提问者

2019-04-14

//img.mukewang.com/szimg/5cb285a400017c8719201020.jpg

//img.mukewang.com/szimg/5cb2866d0001434819201020.jpg

//img.mukewang.com/szimg/5cb2868100010a0e06990874.jpg

-webkit-line-clamp始终无效

Vue 实战商业级读书Web APP完整项目

Vue全家桶+最新前端技术+前后端分离架构，完整项目流程

1610 学习 · 1951 问题

查看课程

相似问题

老师我的-webkit-line-clamp指定行数无效，怎么办？

回答 1

display -webkit-box 关于这个上知识点，能给点相关的资料么

回答 1

老师，这一段不懂，给点资料，给简单说说呗

回答 1

ready报错，输出currentBook显示null，但是vuex里看有啊，而且书渲染了肯定会有currentBook，mixins也引入了

回答 2

手机端无法显示图书封面

回答 2

打开慕课网App查看更多内容