Shulou(Shulou.com)06/01 Report--

This article editor for you a detailed introduction of "CSS how to display lines of source code such as JS/HTML", detailed content, clear steps, details handled properly, I hope that this "CSS how to display lines of source code such as JS/HTML" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Demonstration of the effect of the number of lines of source code

The effect is shown in the screenshot GIF diagram, which shows that the number of rows on the left changes intelligently as the number of rows changes.

Seeing is believing, you can click here: pure CSS realizes the number of lines of code to display demo

Second, the principle of building the number of rows in CSS

The principle for CSS to build lines of code is as follows:

Use:: before pseudo-element content attribute generation, so that do not have to worry about the page box to copy the code when the row number will be contaminated.

Use\ A to control character wrapping. This feature has been applied before. See "CSS content Wrap Technology to achieve character animation loading effect".

The:: before pseudo element is absolutely positioned on the left, and the ancestor element sets overflow:hidden to hide the excess number of rows.

The core CSS code is as follows:

.code {position: relative; overflow: hidden }. Code::before {content:'01.\ A 02.\ A 03.\ 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. 26.\ A 27. A 28.\ A 29.\ A 30.\ A 31.\ 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. 56. A 57. A 58.\ A 59.\ A 60.\ A 61.\ 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 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;}

Yes, the method is silly, which is to ambush the 99-line serial number in CSS in one breath. See the demo page for more details on the CSS code.

Third, the advantages and disadvantages of CSS method.

Advantages:

Simple, efficient, high performance, even if the code changes the layout is also OK.

Disadvantages:

The number of lines supported is limited, for example, the above demo supports up to 99 lines of code.

If the number of lines of code is staggering, for example, thousands of lines, it is recommended to assist JS to generate serial numbers, such as building an insert that contains content content into the page.

Compatibility

Methods are at least supported by IE9+ browsers and theoretically supported by IE8 browsers.

Read here, this "CSS how to display JS/HTML and other source code lines" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.