博客介绍了一种代码序号生成方法，该方法是提前埋伏好99行序号。其优点是简单高效、性能好，代码布局不受代码变化影响；缺点是支持行数有限，最多99行。对于上千行代码，建议辅助生成序号。此方法至少在浏览器端有理论支持。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.code {
padding: 10px 10px 10px 40px;
font-size: 13px;
line-height: 18px;
background-color: #eee;
font-family: "Lucida Console", Consolas, Monaco;
white-space: pre-wrap;
word-break: break-all;
position: relative;
overflow: hidden;
/* 测试演示用 */
resize: horizontal;
}
.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;
top: 10px;
bottom: 10px;
left: 0;
text-align: right;
background-color: #fbfbfb;
color: #333;
outline: 100px solid #fbfbfb;
clip: rect(-100px 3.5ch 9999px 0);
overflow: hidden;
}
</style>
</head>
<body>
<div class="code">
.code {
padding: 10px 10px 10px 40px;
font-size: 13px;
line-height: 18px;
background-color: #eee;
font-family: "Lucida Console", Consolas, Monaco;
white-space: pre-wrap;
word-break: break-all;
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;
top: 10px;
bottom: 10px;
left: 0;
text-align: right;
background-color: #fbfbfb;
color: #333;
outline: 100px solid #fbfbfb;
clip: rect(-100px 2em 9999px 0);
/* IE9+ */
clip: rect(-100px 3.5ch 9999px 0);
overflow: hidden;
}
</div>
<div class="code" itemprop="acticleBody">
<p>点点金色沙砾，如蓬蓬细雨，从黄家一人掌心洒出。</p>
<p>安梓晴举头望天，满脸惊惧地喊道：“救命呀！”</p>
<p>“黄天逸！”</p>
<p>虞璨咬着牙，含恨怒喝：“你还要不要脸？”</p>
<p>虞郦眼神一变，眼看金色沙砾洒落，急忙挥动骊龙剪。</p>
<p>“哧啦！”</p>
<p>一道道灵力流光，从骊龙剪内划出，于虚空结网。</p>
<p>只见那点点金色沙砾，落入其中时，似冰雪消融。</p>
<p>黄家那边，名为黄天逸的高大老者，握着一黄色皮袋，在家主黄凡之后，阴沉着脸，也慢慢踱步而出。</p>
<p>——他是奔着虞家而来。</p>
<p>黄家之主黄凡，向城主辕莲瑶兴师问罪，胞弟黄天逸，则是冲着虞家。</p>
<p>两人，皆是破玄境。</p>
<p>虞渊已从高台走下，默不作声地，站在虞炜身旁。</p>
<p>“老爷子那边？”虞炜沉着脸。</p>
<p>他担心虞璨，还有虞郦等人，会吃大亏。</p>
<p>虞渊微笑，“没事的。”</p>
<p>看着他自信的神情，不知道细节的虞炜，一颗悬着的心，忽然就落下了。</p>
<p>眼前的这个侄儿，近日表现的诸多古怪，令他困惑重重。</p>
<p>可他，却也渐渐觉得，因虞渊的存在，家族的很多难题，已不需要自己扛在肩上。</p>
<p>虞渊，正在帮他分担。</p>
<p>“你们黄家，好大的威风！”老爷子虞璨，气的直哆嗦，“死的是你黄家人，你们便要造反？要是我孙儿虞渊死了呢？”</p>
<p>辕家，赵家很多人，表情错愕，似乎不太明白状况。</p>
<p>黄家，难道是要挑衅辕家，挑衅暗月城的霸主？</p>
<p>不然，岂敢如此胡来？</p>
<p>“不错！”黄天逸周身，被蒙蒙金黄色光幕环绕着，“因为死的，是我们黄家的族人，所以就是不行！”</p>
<p>他一动，聚集在金珞山的，其余的黄家族人，也都神情不善。</p>
<p>“黄家，真打算造反？就因为黄滨死了？”厉锋在短暂的惊愕后，突地变了脸色，意识到情况不妙，“福老？”</p>
<p>辕福乃辕家长辈，他向来沉默寡言，在看到厉锋求救般的目光后，才眯着眼，慢吞吞地说：“黄家想要找死的话，那么，就让他们去死好了。”</p>
<p>“我倒要看看，你们虞家，谁能挡我？”黄天逸喝道。</p>
<p>有着破玄境初期修为的他，先前只是小试牛刀，如今临近了，没有破玄战力的虞家，还真是无人能抗衡。</p>
<p>黄庭境后期，手持骊龙剪的虞郦，也顶多能支撑一阵子。</p>
<p>“我来试试看。”</p>
<p>突有一巍峨身影，如滚动的皮球般，在惊慌失措的虞家族人前闪现出来。</p>
<p>“赵东升！”</p>
<p>黄天逸霍然停住，看着猛地冒出的大胖子，恼火地说道：“黄家和虞家的纠纷，和你们赵家有什么关系？”</p>
<p>赵家那边的赵溪，扭头询问：“丫头，你爹这是干啥？”</p>
<p>“能干啥，当然是帮虞家，帮虞渊啊。”赵雅芙随意道。</p>
<p>“为什么？”赵溪面色古怪，“不会是虞渊和蔺竹筠解除婚约，要娶你吧？”</p>
<p>“小叔，你真是狗嘴里吐不出象牙啊。”赵雅芙甜甜地笑着，“虞大哥和蔺竹筠的婚约，还没有解除呢。”</p>
<p>“那，我们赵家凭什么，去帮他虞家？”赵溪的视线，又落向虞郦握着的骊龙剪，再问：“还有，那把骊龙剪又是怎么回事？”</p>
<p>在黄天逸动手后，虞郦才将骊龙剪取出来。</p>
<p>赵溪自然知道，骊龙剪可是灵器，当初刚到灵宝斋，虞郦就想购下，只是因囊中羞涩，财力不足，才被迫搁置。</p>
<p>“骊龙剪呀，可能是我们赵家，给的定情信物吧。”赵雅芙吐舌，也故意捉弄他。</p>
<p>赵溪挠了挠头，愈发糊涂了。</p>
<p>“黄家坏了暗月城的规矩，意图谋反，人人得而诛之！”</p>
<p>便在此刻，城主大人不分青红皂白地，先将罪名扣在黄家头上，“黄凡！你还有什么话好说？”</p>
<p>对黄家的现任家主，和她父亲辕秋舫一辈的黄凡，她直呼其名，已经不用敬称了。</p>
<p>“我们黄家坏规矩？”</p>
<p>黄凡怒极反笑，“真正坏规矩的，是城主大人你吧？!不要以为，你是暗月城的城主，就可肆意妄为！我黄家虽弱，却绝对不会受这个侮辱！”</p>
<p>“我就侮辱你，侮辱黄家了，你又能怎样？”辕莲瑶懒得和他周旋下去，索性直接撕破脸了，“从现在起，我不用代表暗月城，我就代表辕家之主，要在今日，诛灭你黄家。”</p>
<p>“算我们赵家一个。”端坐着赵家人群中，体型矮小的赵正豪，在最关键的时候，突然插话了，“赵家儿郎，都准备准备，拿黄家来开刀。”</p>
<p>他一发话，那些来金珞山的赵家族人，皆一一站起。</p>
<p>很多赵家族人，其实根本不知道实情，都觉得眼前的局面，说不出的古怪。</p>
<p>但，他是现任家主，是赵东升、赵溪的父亲。</p>
<p>他多年来养成的威信，让赵家的族人，不需要知道缘由，只需要知道他的明确态度。</p>
<p>“老头子，你？”赵溪愕然。</p>
<p>“黄家要从暗月城除名。”赵正豪漠然道。</p>
<p>虞家那边，本紧张不安的虞璨，眼看赵东升突然冒出，而后赵家之主发话，辕莲瑶又咄咄逼人，突然就放心了。</p>
<p>“黄家，怎么就开罪了辕家和赵家？”虞璨百思不得其解。</p>
<p>先前还气势汹汹的，众多的黄家族人，一看到这个架势，突然冷静了下来。</p>
<p>很多黄家族人，都眼神困惑地，望着黄凡、黄天逸兄弟，以目光询问：“怎么办？”</p>
<p>要对虞家动手的黄天逸，面对突然插足的赵东升和赵家，也觉得头疼，他抬头看向天空，心情烦躁无比，“时间，还没有到。三境的比斗，通脉境的第一战，才刚刚结束啊！”</p>
<p>“城主大人，我想弄清楚，这究竟是怎么回事？”黄凡内心更暴躁，可眼看局势不妙，天色未变，也很急，“我们黄家究竟犯了什么错，要你们辕家和赵家联手，将我们从暗月城除名。”</p>
<p>辕莲瑶张口，正欲讲话。</p>
<p>“城主姐姐，别给他们太多拖延的时间。”虞渊的声音，忽然悠悠响起，“现在是白天，等到了晚上，很多事情可就难办了。”</p>
<p>黄凡、黄琛，包括黄天逸的狠毒目光，霎那间，落在虞渊脸上。</p>
<p>“小子找死！”</p>
<p>离的最近的黄琛，再也没耽搁，化作一道金黄电光，疾射而来。</p>
<p>黄凡一言不发，突然就盯住了辕莲瑶。</p>
<p>虞渊的那句话，让黄家三位核心人物，骤然明白了一个事实——他们和血神教的密谋大计，怕是已暴露。</p>
<p>事已至此，他们也不再犹豫，提前发动。</p>
<p>“轰！轰隆隆！”</p>
<p>几乎同时，整个金珞山，突然地动山摇。</p>
<p>山腰处，有不少洞穴，竟喷薄出道道恐怖血色光柱。</p>
<p>血色光柱，如鲜红的染料，喷洒在阴沉的天空，使得天色绯红，令人心情压抑难受。</p>
<p>山谷中，境界低微如通脉境者，只觉得呼吸，都比往常要用力许多。</p>
<p>“黄家，勾结外人，欲要血洗暗月城，罪该万死！”辕莲瑶看着天色，深吸一口气，终确定虞渊的判断，没有任何的错误。</p>
<p>对黄家，她也再不报一丝幻想。</p>
<p>一朵朵鲜红莲花，就在她的脚底下生出，璀璨夺目。</p>
<p>……</p>
<p>“喀喀！”</p>
<p>一块块金珞石，随着黄琛的举动，裂地而出。</p>
<p>金光熠熠的石块，炮弹般，朝着虞渊砸来。</p>
<p>然，更多的石块，突传来更为刺耳厉啸。</p>
<p>“嘭！”</p>
<p>高空中金珞石，猛地爆碎，石块内部有滴滴鲜血，如长了眼睛般，向辕莲瑶飞去。</p>
<p>滴滴鲜血，如红玛瑙，晶莹剔透，暗含恐怖的灵能。</p>
<p>“虞渊！”</p>
<p>大伯虞炜轻喝一声，已落在他身前，浑身灵力涌动，将那些砸来的金珞石轰碎。</p>
<p>“黄琛的目标，并不是我。”虞渊神情冷静，“他对我的攻击，只是一个幌子罢了。他，还有黄家之主黄凡，这是要联手杀城主！”</p>
<p>……</p>
</div>
</body>
</html>
对，方法比较傻，就是一口气把99行序号在CSS中埋伏好。
CSS方法实现的优缺点
优点：
简单，高效，性能十足，即使代码变来变去布局也OK。
缺点：
支持的行数有限，例如上面的demo最多支持99行代码。
如果代码行数惊人，例如上千行，则建议辅助JS去生成序号，例如构建一段包含content内容的<style>插入到页面中。
兼容性
方法至少IE9+浏览器支持，IE8浏览器理论上支持。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
