小tips: 纯CSS显示JS/HTML等源代码行数
导读:收集整理的这篇文章主要介绍了html5教程-小tips: 纯CSS显示JS/HTML等源代码行数,觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。...
收集整理的这篇文章主要介绍了html5教程-小tips: 纯CSS显示JS/HTML等源代码行数,觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 一、源代码行数效果演示
效果如下截屏GIF图示意,可以看到,随着行数变化,左侧的行的数目也智能跟着变化。
眼见为实,您可以狠狠地点击这里:纯CSS实现@R_360_2034@显示demo
二、CSS构建行数的原理
CSS构建代码行数的原理如下:
- 使用
::before
伪元素content
属性生成,这样不用担心网页框选复制代码的时候行数序号会污染。 - 使用
/A
控制字符的换行,之前有效果应用过此特性,见“CSS content换行技术实现字符animation loading效果”。 ::before
伪元素绝对定位在左侧,祖先元素设置overflow:hidden
隐藏多余的行数。
核心CSS代码示意如下:
.code { posITion: relative; overflow: hidden; } .code::before { content: '01./A 02./A 03./A 04./A 05./A 06./A 07./A 08./A 09./A 10./A 11./A 12./A 13./A 14./A 15./A 16./A 17./A 18./A 19./A 20./A 21./A 22./A 23./A 24./A 25./A 26./A 27./A 28./A 29./A 30./A 31./A 32./A 33./A 34./A 35./A 36./A 37./A 38./A 39./A 40./A 41./A 42./A 43./A 44./A 45./A 46./A 47./A 48./A 49./A 50./A 51./A 52./A 53./A 54./A 55./A 56./A 57./A 58./A 59./A 60./A 61./A 62./A 63./A 64./A 65./A 66./A 67./A 68./A 69./A 70./A 71./A 72./A 73./A 74./A 75./A 76./A 77./A 78./A 79./A 80./A 81./A 82./A 83./A 84./A 85./A 86./A 87./A 88./A 89./A 90./A 91./A 92./A 93./A 94./A 95./A 96./A 97./A 98./A 99'; position: absolute; }
对,方法比较傻,就是一口气把99行序号在CSS中埋伏好。更细节CSS代码参见demo页面。
三、CSS方法实现的优缺点
优点:
简单,高效,性能十足,即使代码变来变去布局也OK。
缺点:
支持的行数有限,例如上面的demo最多支持99行代码。
如果代码行数惊人,例如上千行,则建议辅助JS去生成序号,例如构建一段包含content
内容的style>
插入到页面中。
兼容性
方法至少IE9+浏览器支持,IE8浏览器理论上支持。
四、结束语
重要的是本文的效果实现思路,到不一定非得用在显示代码行数上。
还要赶下一篇文章,就不多说了。
感谢阅读!
(本篇完)
觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 小tips: 纯CSS显示JS/HTML等源代码行数
本文地址: https://pptw.com/jishu/586743.html