这篇文章发布于 2018年02月1日,星期四,23:00,归类于 CSS相关。 阅读 28367 次, 今日 4 次 6 条评论
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7343
本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。
一、源代码行数效果演示
效果如下截屏GIF图示意,可以看到,随着行数变化,左侧的行的数目也智能跟着变化。
眼见为实,您可以狠狠地点击这里:纯CSS实现代码行数显示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浏览器理论上支持。
四、结束语
重要的是本文的效果实现思路,到不一定非得用在显示代码行数上。
还要赶下一篇文章,就不多说了。
感谢阅读!
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:http://www.zhangxinxu.com/wordpress/?p=7343
(本篇完)
- CSS content换行实现字符点点点loading效果 (0.768)
- 小tip: 使用CSS(Unicode字符)让inline水平元素换行 (0.571)
- CSS content内容生成技术以及应用 (0.395)
- CSS3 box-shadow实现纸张的曲线投影效果 (0.395)
- CSS之before, after伪元素特性表现两则 (0.395)
- CSS ::marker伪元素简介 (0.395)
- display:table-cell自适应布局下连续单词字符换行 (0.373)
- 自适应表格连续字符换行及单行溢出点点点显示 (0.373)
- 借助wbr标签实现连续英文字符的精准换行 (0.373)
- CSS overflow-wrap新属性值anywhere是干嘛用的? (0.373)
- CSS content新的替换元素规范行为解读 (RANDOM - 0.198)
给大家一个思路 counter-increment,我已经成功用表格的方式展示行数了
鸡蛋里挑个骨头:代码自动转行严格来说不应该显示多一行序号了,应该当行左侧序号放空(序号继续往下挪)
感谢大大,我直接写死8000个序号,其实对于我自己来说1000行都够用
…
…进来之前以为在线编辑器可以不用 js 来维护行号了…! 学习了之后竟然有点失望..! (笑)
真的是高产