3

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

或者这个： 在 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 高度相同的行号硬编码列表，但是由于我需要支持多种字体大小，因此此方法将不起作用，并且将显示未对齐的行号。

示例（感谢：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？

4

1 回答 1

0

根据您的回答，我发现 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>

于 2019-02-01T06:45:55.997 回答