如何根据容器的高度从 css 或 javascript 生成行号

Question

我有一种情况，我必须制作一些看起来像代码编辑器的东西，为了实现这一点，我必须在没有任何库的情况下使用 HTML、CSS 和 Js。

除了行号之外，我几乎完成了所有工作，但我不知道该怎么做。

到目前为止，我已经实现了这一点：

这实际上是我的目标：

假设我有这个 html 结构：

<html>
    <head>
    </head>
    
    <body>
        <div class="lines"></div>
        <div class="code"></div>
    </body>
</html>

如何使用 CSS 或 JavaScript 在code中根据内容的高度填充lines ？

Answer 1

这里有一些东西：（写得很快，随时调整 CSS 等）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <style>
    #code {
        line-height: 15px;
    }
    .holder {
        display: flex
    }
    
    </style>
</head>
<body>

        <div class="holder">
            <div>
                <pre id="lines">
            </pre>
            </div>
            <div>
                <pre id="code">
                .aaa {
                   bbb
                }
                .ccc {
                   ddd
                }
                </pre>
            </div>
        </div>

</body>
    <script>
    const codeHeight = document.getElementById('code').offsetHeight;    
    const lines = Math.ceil(codeHeight / 15);
    let html = '';
    for (i = 1; i < lines; i++) {
        html += i + '<br>'
    }
    document.getElementById('lines').innerHTML = html;  
    </script>
</html>

这是 JS 小提琴： https://jsfiddle.net/4aowc26f/

计算中的数字 15 是由于 15px 行高。 随意为此引入变量。

Answer 2

你应该把每一行作为一个 div <div><span>{line}</span> <span>some code</span> </div>

如何根据容器的高度从 css 或 javascript 生成行号

问题描述

2 个解决方案

解决方案1
1 2022-01-23 13:13:33

解决方案2
0 2022-01-23 12:55:52

如何根据容器的高度从 css 或 javascript 生成行号

问题描述

2 个解决方案

解决方案1 1 2022-01-23 13:13:33

解决方案2 0 2022-01-23 12:55:52

解决方案1
1 2022-01-23 13:13:33

解决方案2
0 2022-01-23 12:55:52