HTML中的健壮行号（文本换行和字体大小更改）

Question

我见过很多关于行号的问题，例如： Create line numbers on pre with CSS only

或者这个： Display line number in textarea

我的问题是，我还需要行数来计算被多行包裹的行。

section {
background: #303030;
color: #f1f1f1;
padding: 10px 16px;
border-radius: 2px;
border-top: 4px solid #00aeef;
-moz-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
counter-reset: line;
}

section div {
  display: block;
line-height: 1.5rem;
 
}

section div:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888

}

<section>
  <div>lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.</div>
  <div>lorem ipsum. <span style="font-size: 54px;">big text</span></div>
  <div>lorem ipsum.</div>
</section>

如您所见，第 1 行被包裹在多个物理行上，当前计数不考虑它。

我在寻找答案时发现的另一种方法是添加与 textarea 高度相同的行号硬编码列表，但由于我需要支持多种字体大小，此方法将不起作用，并将显示行号 un -对齐。

示例（感谢：Aakash Chakravarthy，https://jsfiddle.net/vaakash/5TF5h/）：

textarea{
    background: url(http://i.imgur.com/2cOaJ.png);
background-attachment: local;
background-repeat: no-repeat;
padding-left: 35px;
padding-top: 10px;
    border-color:#ccc;
}

<textarea rows="10" cols="40"></textarea>

请注意，我的 HTML 是在不同的工具（etherpad）中生成的，我需要在从不同的工具获取 HTML 后添加行号，所以我不知道文本的长度或字体的大小在里面。

我的问题是： 如何在考虑文本换行和字体大小的情况下将行号添加到动态 HTML？

Answer 1

根据您的回答，我发现 textarea 的字体大小导致行号未对齐。因此您可以将字体大小设置为 14px，然后对齐行号。

textarea{
background: url(http://i.imgur.com/2cOaJ.png);
background-attachment: local;
background-repeat: no-repeat;
padding-left: 35px;
padding-top: 10px;
border-color:#ccc;
font-size: 14px;//add the style
}

<textarea rows="10" cols="40"></textarea>