CSS：textarea line-height 匹配行号 line-height？

Posted 2023-05-07

【中文标题】CSS：textarea line-height 匹配行号 line-height？

【英文标题】：CSS: textarea line-height match Line number line-height?

【发布时间】：2021-07-14 03:17:48

【问题描述】：

我有这个 textarea，我用这个 hack 来获取行号：

这很好，但是我无法让 textarea 的行高、填充等与行号的相同属性相匹配。

您可以在第 6 行之后看到下面的行开始移动。

这是我的 CSS：

textarea 
 background: url(http://i.imgur.com/2cOaJ.png);
 background-attachment: local;
 background-repeat: no-repeat;
 padding-top: .995em;
 border-color:#ccc;
 line-height:1.154em;

有什么方法可以改变它们以匹配 textarea 的属性？

提前谢谢你！

【参考方案1】：

我让这个在 chrome 中正确排列。我不建议使用 12px 作为字体大小，但这就是它的计算结果。

textarea 
  background: url(http://i.imgur.com/2cOaJ.png);
  background-attachment: local;
  background-repeat: no-repeat;
  border-color: #ccc;
  font-family: inherit;
  font-size: 12px;
  padding: .75rem 0 0 1.8rem;
  line-height: 1.4;
  overflow: auto;
  background-color: white;

【讨论】：

非常感谢您的回答！