我见过很多关于行号的问题，比如： 仅使用 CSS 在 pre 上创建行号
或者这个： 在文本区域中显示行号
我的问题是，对于用多行包装的行，我也需要行数。
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 被包裹在多个物理线路上，并且当前计数不考虑它。
我在寻找答案时发现的另一个方法是添加具有相同文本区域高度的行号硬编码列表，但由于我需要支持多种字体大小，此方法将不起作用，并且将显示行号未对齐。
示例(感谢：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 添加行号？
根据您的回答，我发现是文本区域的字体大小导致行号未对齐。因此，您可以将字体大小设置为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>