为现有HTML添加行号

Question

为现有HTML添加行号

3

我正在尝试为现有的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>

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

- Gil

1

明确定义元素的宽度或使用HTML表格。 - Adam K.

4个回答

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>

- Adam K.

1

如果您需要自动列出要求，请使用<OL>标签，另一种方法是不添加不同的标签。

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>

- lalit bhakuni

0

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>

- Adam K.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nitheesh · Accepted Answer

参考这个问题的解决方案，我为您的问题开发了一种解决方案。您可以使用counter-reset和counter-increment属性来实现此目的。

<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>