为什么 Codemirror 编辑器不水平滚动长行？答案

【问题标题】：Why Codemirror editor does NOT scroll horizontally with long line?为什么 Codemirror 编辑器不水平滚动长行？
【发布时间】：2023-02-12 06:32:35
【问题描述】：

我有一个代码镜像版本：5.65.3 和 Blazor。当我在编辑器中有一条长线时，水平滚动不起作用，而是使用页面的滚动，这会弄乱整个页面。

像这样：

我认为我没有更改 Codemirror 中的任何 CSS。

这是一些相关的 CSS 行：

    .CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 750px;
  color: black;
  direction: ltr;

}


.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 50px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -50px; margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
  z-index: 0;
}

我通过这段代码调用 codemirror：（onchange 是因为我使用 Blazor 进行绑定）

window.editor= function (dontNetObjRef) {

    editor = CodeMirror.fromTextArea(document.getElementById('myTextArea'), {
        lineNumbers: true,
        indentUnit: 4,
        lineWrapping: true,
        tabMode: "shift",
        gutters: ["CodeMirror-lint-markers"]
    });

    //JavaScript function use the onchange event of CodeMirror to invoke the C# method and pass the value of the myTextArea .

    editor.on("change", editor => {
        dontNetObjRef.invokeMethodAsync("UpdateField", editor.getValue());
        // console.log(editor.getValue());

    });

注意：即使我使用了lineWrapping: true，它也移到了第二行并且对滚动做了同样的问题。此外，当我设置固定宽度（如 1000px）时效果很好，但我想将其设置为自动以防用户屏幕尺寸发生变化。

【问题讨论】：

您是否尝试设置max-width？
@Jax-p 我试过 max-width:auto 和 100% 但没有成功
您能提供最小的可重现示例吗？因为default setup works fine。
@Jax-p 我添加了更多代码 - 你认为这是因为我使用的是 Blazor 吗？
我不这么认为 - 它看起来像 CSS 问题。 CodeMirror 不是用 flex 包裹的吗？我会将块（不是 flex）元素作为父元素并尝试使用 max-width: 100vw 或类似的东西，但只要我不能重现问题，它就只是猜测。

标签： css codemirror

【解决方案1】：

感谢 Jax-p 给我一些提示来解决这个问题。

我在.CodeMirror类中添加了width:70vw，在.CodeMirror-scroll中添加了max-width:70vm

影响更改的另一件事是我将文本区域放在 <div class=col-11> 中，这会影响 CSS 中的宽度，所以我只是删除它并且一切正常。

【讨论】：

【解决方案2】：

在处理一个项目时，我遇到了同样的问题——这是 CSS 的问题。

我用非常简单的方法修复了它弹性盒子解决方案：

<div class="root-wrapper">                <!-- Editor parent container -->
    <div class="cm-editor ͼ1 ͼ2 ͼ4">      <!-- CodeMirror stuff (v6 in my case) -->
        ...
    </div>
</div>

对应的造型：

.root-wrapper {
    display: flex;
    flex-direction: row;

    .cm-editor {
        width: 0;
        flex-grow: 1;
    }
}

【讨论】：