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

Question

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

此题与相似，但与不同。

以此为例：

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

用白色space保存：

code {
    white-space: pre-wrap;
}

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

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

我在想我可以使用伪selector、CSS计数器、contents: 和其他一些想法来实现它，但我没有办法每行select。

我知道有 ::first-letter 和 ::first-line 伪元素，但是到处找了找也没找到像 nth-line() 或 [=18= 这样的东西] select或

有谁知道任何晦涩的 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>

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

Is it possible to count lines of text in CSS

css

css-counter