CodeMirror:水平自动调整大小,无滚动条

CodeMirror: auto-resize horizontally, without scrollbar

我需要一个 CodeMirror 编辑器,它以一定的宽度开始,然后自动向右增长以匹配最大行长度。 IE。大致与 CodeMirror 的功能相同 when height is set to auto,但具有宽度。

这是 self-contained example。编辑器会沿 y 轴自动增长,但不会沿 x 轴增长。通过调整 CSS,我可以拥有一个带滚动条的固定宽度编辑器,或者一个可以填满浏览器整个宽度但不会随着您键入而增长的编辑器。我假设 overflow-x 是相关的,但我不明白它如何与父元素上设置的其他 CSS 大小属性交互。我也尝试在 CodeMirror-scroll 上设置 属性,但它没有帮助。

我相信这可以单独使用 CSS 属性来完成。事实上,我的应用程序中已经有这种行为,但向左增长,而不是向右增长,但我不明白为什么会发生,或者如何在一个小例子中重现它。

This question 本质上是一样的,但是对于垂直滚动条。

只需将 float:left 添加到 CodeMirror div

<div id="here" style="float:left"></div>

这不是 CodeMirror 支持的。您可以通过将 .CodeMirrorwidth 设置为 (-webkit-)fit-content 来让某些东西正常工作,但可能会出现一些极端情况,这会破坏滚动条或光标展示位置。