line-clamp无法生效的解决方案

468122151 发布于2019-08-30 11:10 / 2871人阅读

摘要：如果你在网上找了有关无法生效而没有收获的，希望这篇文章能帮到你在近一段时间工作中，遇到了一个需求一个简单的制作当中有超出两行文字省略且显示省略号笔主还是实习萌新，记得自己以前写类似效果的是单行，代码如下那么多行换行，在和搜索引擎后探究

如果你在网上找了有关 line-clamp 无法生效而没有收获的，希望这篇文章能帮到你

在近一段时间工作中，遇到了一个需求

一个简单的item制作
当中有超出两行文字省略且显示省略号

笔主还是实习萌新，记得自己以前写类似效果的是单行，代码如下

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

那么多行换行，在MDN和搜索引擎后探究一番
得出了需要调用以下CSS样式

-webkit-line-clamp:2;
-webkit-box-orient: vertical;
display: -webkit-box;

参考链接MDN -webkit-line-clamp
作者描述？Line Clampin’ (Truncating Multiple Line Text)

在去掉white-space属性后添加查到得CSS样式，就能得到上述效果，网上给的答案大概是这个意思....

当然，如果是这么一帆风顺也就没有今天的文章了

如运行结果所示，似乎我们的CSS样式并没有生效
检查CSS样式

看起来并无问题，还是上网查阅了一番，得到以下结果：

1.默认编译的时候，会过滤 -webkit-box-orient: vertical;
以及
2.安装依赖这个依赖：npm i -S optimize-css-assets-webpack-plugin，并且注释掉中的一段代码：
诸如此类....

不过本着学习态度，自己还是尝试调试了一下
在将 overflow 属性注释掉的情况，我发现了是这种的效果

显而易见，不是CSS不生效，而是Div内没有换行
而没有换行，则导致line-clamp没有生效
所以，接下来要做的，是要将Div设置启动换行效果

overflow-wrap: break-word;

参考资料：MDN-overflow-wrap

最终效果

GPU云服务器云服务器解决阿里云服务器无法访问80端口的问题服务器没有生效的云盘云服务器的生效时间挂载的磁盘无法看见

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114812.html

黑科技：CSS定制多行省略

摘要：多行省略就是大段文字后面的花式点点点。但它固定使用省略号，无法直接扩展。年月日，腾讯控股有限公司在香港联交所主板公开上市股票代号。转载请注明出处：http://hai.li/2017/03/08/css-... 什么是多行省略？ showImg(https://segmentfault.com/img/bVKr2N?w=660&h=325); 当字数多到一定程度就显示省略号点点点。最...

Leo_chen 2019-08-30 15:53 评论0 收藏0
黑科技：CSS定制多行省略

摘要：多行省略就是大段文字后面的花式点点点。但它固定使用省略号，无法直接扩展。年月日，腾讯控股有限公司在香港联交所主板公开上市股票代号。转载请注明出处：http://hai.li/2017/03/08/css-... 什么是多行省略？ showImg(https://segmentfault.com/img/bVKr2N?w=660&h=325); 当字数多到一定程度就显示省略号点点点。最...

wpw 2019-08-01 16:29 评论0 收藏0
【前端芝士树】纯CSS实现多行文本溢出显示省略号

摘要：前端芝士树纯实现多行文本溢出显示省略号使用来控制行数由于用来限制在一个块元素显示的文本的行数这是一个不规范的属性，它没有出现在规范草案中，为了实现该效果，它需要组合其他外来的属性。【前端芝士树】纯CSS实现多行文本溢出显示省略号使用-webkit-line-clamp来控制行数由于-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（u...

CNZPH 2019-08-30 15:54 评论0 收藏0
css-从笔试题中看知识

摘要：常见子元素居中方式原理是绝对定位是根据左上角，然后让子元素回移就居中了水平居中，条件是当前元素指定宽和高水平垂直居中描述图形的语言中的每个元素都是可用的。您可以为某个元素附加事件处理器每个被绘制的图形均被视为对象。常见子元素居中方式 (1) position: absolute: position: absolute; + transform: translate(-50%, -50...

tainzhi 2019-08-30 15:55 评论0 收藏0