将行号添加到现有 HTML答案

【问题标题】：Add Line Number to existing HTML将行号添加到现有 HTML
【发布时间】：2023-03-31 18:05:01
【问题描述】：

我正在尝试将行号添加到行高不等的现有 html - 许多类型的字体大小和图像。每条线看起来像 -

<div id="1"><right><span>line 1</span></right></div>
<div id="2"><right><span>line 2</span></right></div>
<div id="3"><right><span>line 3</span></right></div>

有没有简单的方法来添加垂直对齐的行号？谢谢

【问题讨论】：

明确定义元素宽度或使用 html TABLE

标签： html css

【解决方案1】：

受this 问题的启发，我为您的问题开发了一个解决方案。您可以使用counter-reset and counter-increment property 来实现此目的

<html>
    <head>
        <style>
            .container {
              counter-reset: line;
            }
            .container .lineNum {
                display: block;
                line-height: 1.5rem;
            }

            .container .lineNum:before {
                counter-increment: line;
                content: counter(line);
                display: inline-block;
                margin-right: .5em;
            }
        </style>
    </head>
<body>
    <div class="container">
        <div id="1" class="lineNum"><right><span>line 1</span></right></div>
        <div id="2" class="lineNum"><right><span>line 2</span></right></div>
        <div id="3" class="lineNum"><right><span>line 3</span></right></div>
    </div>
</body>

</html>

【讨论】：

哇，我从来不知道 css 中存在 counter-increment: line; 这样的东西。好吧，你每天都会学到新东西。

【解决方案2】：

也许是一个小的自动段落计数器。

$(document).ready(function() {
  var maxNum = 0;//how many lines should be prepared (Takin in considersation, there would be more wrappers) 
  $(".NumeredTextBlock").each(function() {//create counter for each .NumeredTextBlock wrapper
    var line = 1;//start with number 1
    $("p", this).each(function() {//look for paragraph elements inside wrapper
      $(this).addClass("line" + line);//add class with line number
      line++;
      if (maxNum < line) maxNum = line;//set the maximum number of lines used in HTML DOM for wrapper
    });
  });
  var prepStyle = "";//prepare css style with line numbering
  while (maxNum--) {//prepare as many styles as the max number in document
    prepStyle += ".line" + maxNum + ":before{content:'" + maxNum + "'}";
  }
  $("#numbers").html(prepStyle);//add prepared styles to the HTML DOM
  console.log("resulting generated <style id='numbers'>"+prepStyle+"</style>")
});

.NumeredTextBlock p {
  padding-left: 50px;
  position: relative;
}

.NumeredTextBlock p:before {
  display: block;
  position: absolute;
  left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="NumeredTextBlock">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
  <p>Lorem ipsum dol</p>
  <p>Lorem</p>
</div>
<style id="numbers"></style>

【讨论】：

【解决方案3】：

如果你有需求列表自动使用<OL>标签另一种方法是不添加这样的 defrent 标签

div span {
    float: right;
}

    <ol>
    <li> list </li>
    <li> list </li>
    <li> list </li>
    <li> list </li>
    </ol>
    
    
    
 <div id="1"><right>line <span>1</span></right></div>
<div id="2"><right>line <span>2</span></right></div>
<div id="3"><right>line <span>3</span></right></div>

【讨论】：

【解决方案4】：

div {
  position: relative;
}

div>span:first-of-type {
  width: 120px;
  display: inline-block;
}

div>span:nth-of-type(2) {
  position: absolute;
  transform: translate(0, -50%);
  top: 50%;
}

td,
div {
  border-bottom: 1px solid;
}

td {
  vertical-align: middle;
}

<table>
  <tr>
    <td>Some str length<br/>Some str length</td>
    <td>105</td>
  </tr>
  <tr>
    <td>shorter</td>
    <td>102</td>
  </tr>
</table>

<br/>
<br/>

<div>
  <span>Some str length<br/>Some str length</span>
  <span>105</span>
</div>
<div>
  <span>shorter</span>
  <span>102</span>
</div>

【讨论】：