时间戳

首页 > 解决方案 > 是否可以计算 CSS 中的文本行数

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

问题描述

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

This question与此 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 技巧？

标签： csscss-counter

解决方案

如果行数有限，您可以尝试以下方法：

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>

推荐阅读