html - 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 行包裹在不止一条物理行上，当前计数不考虑它。

我在寻找答案时发现的另一个方法是添加具有与文本区域相同高度的硬编码行号列表，但由于我需要支持多种字体大小，因此此方法将不起作用并将显示行号 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>