是否可以计算 CSS 中的文本行数

Question

我正在寻找一种可能的方法，仅使用 CSS 可以允许为 DOM 元素中的每一行文本增加一个 CSS 计数器。

这个问题类似，但和this SO question不一样。

以此为例：

<p>Here is a basic "hello world" program, written in Rust:</p>
<code>
fn main() {
    println!("Hello, world!");
}
</code>

保留空白：

code {
    white-space: pre-wrap;
}

我正在寻找一种方法，可以在每行文本之前（或在每个换行符之前）显示一个行号。

1. | fn main() {
2. |    println!("Hello, world!");
3. | }

我在想我可以使用伪选择器、CSS 计数器、contents: 和其他一些想法来实现它，但我无法选择每一行。

我知道有 ::first-letter 和 ::first-line 伪元素，但是在到处寻找之后我找不到像 nth-line() 或 ::line 选择器这样的东西。

有没有人知道任何晦涩难懂的 CSS 技巧可以使这成为可能？

Answer 1

如果行数有限，你可以试试下面的方法：

code {
    white-space: pre-wrap;
    position: relative;
    padding-left: 5ch; /* the space for the numbers */
    display: block;
    overflow: hidden; /* hide the non needed numbers */
    border: 1px solid;
}
code::before,
code::after {
  content: "1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14."; /* and so on*/
  position: absolute;
  width: 0; /* force a line break */
  top: 0;
  left: 0;
}

code::after {
  content: "| | | | | | | | | | | | | | | | | |"; /* and so on*/
  left: 3ch; /* a small offset to not overlap the numbers */
}

<p>Here is a basic "hello world" program, written in Rust:</p>
<code>
fn main() {
    println!("Hello, world!");
}
</code>
Another code block:
<code>
fn main() {
    let mut a = 0;
    let mut b = 2;

    println!("Hello, world!");

    for i in 0..5) {
        a += b;
    }

    println!("{}", a);
}
</code>