本文小編為大家詳細(xì)介紹“CSS怎么顯示JS/HTML等源代碼行數(shù)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“CSS怎么顯示JS/HTML等源代碼行數(shù)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序定制開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了塔河免費(fèi)建站歡迎大家使用！

一、源代碼行數(shù)效果演示

效果如下截屏GIF圖示意，可以看到，隨著行數(shù)變化，左側(cè)的行的數(shù)目也智能跟著變化。

眼見(jiàn)為實(shí)，您可以狠狠地點(diǎn)擊這里：純CSS實(shí)現(xiàn)代碼行數(shù)顯示demo

二、CSS構(gòu)建行數(shù)的原理

CSS構(gòu)建代碼行數(shù)的原理如下：

1. 使用::before偽元素content屬性生成，這樣不用擔(dān)心網(wǎng)頁(yè)框選復(fù)制代碼的時(shí)候行數(shù)序號(hào)會(huì)污染。

2. 使用\A控制字符的換行，之前有效果應(yīng)用過(guò)此特性，見(jiàn)“CSS content換行技術(shù)實(shí)現(xiàn)字符animation loading效果”。

3. ::before偽元素絕對(duì)定位在左側(cè)，祖先元素設(shè)置overflow:hidden隱藏多余的行數(shù)。

核心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;
}

對(duì)，方法比較傻，就是一口氣把99行序號(hào)在CSS中埋伏好。更細(xì)節(jié)CSS代碼參見(jiàn)demo頁(yè)面。

三、CSS方法實(shí)現(xiàn)的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：
簡(jiǎn)單，高效，性能十足，即使代碼變來(lái)變?nèi)ゲ季忠睴K。

缺點(diǎn)：
支持的行數(shù)有限，例如上面的demo最多支持99行代碼。

如果代碼行數(shù)驚人，例如上千行，則建議輔助JS去生成序號(hào)，例如構(gòu)建一段包含content內(nèi)容的