CodeMirror（JS代码高亮）在textarea的文本超过textarea的宽度

我已经与CodeMirror今天一直在努力创造一个小环境，在那里我可以编辑存储在数据库中的一些PHP代码（是的，我知道这可能是有害的：，但PHP代码对于普通用户不可访问）。CodeMirror（JS代码高亮）在textarea的文本超过textarea的宽度

Everythings很棒，编辑工作，代码突出显示作品，缩进标签工作，但有一件事现在困扰了我一段时间，我似乎无法找到解决方案。这是我的CodeMirror编辑文本区域，这是长于textarea的超过textarea的，并会在某个地方我的屏幕上消失中的代码（请参阅本文章最后的截图）。

我想有这样的代码，继续下面的线路（不ofcourse添加额外的行号）。这是一个已知问题和/或易于修复吗？

以下是截图： http://www.pendemo.nl/codemirror.png

在此先感谢。

//编辑：它的固定

好了，想通弄明白了，似乎所有的CSS文件！以下是对任何感兴趣的人的修复：

.CodeMirror { 
    overflow-y: auto; 
    overflow-x: scroll; 
    width: 700px; 
    height: auto; 
    line-height: 1em; 
    font-family: monospace; 
    _position: relative; /* IE6 hack */ 
}

overflow-y：auto（高度正在自动完成，因此不需要垂直滚动条）。 overflow-x：scroll;强制CodeMirror添加滚动条而不是超出textarea的宽度。他们给出一个固定的宽度（px或百分比）。您也可以添加最大高度，但是如果您确实需要设置overflow-y来滚动aswel。

来源

2011-05-05 Joshua - Pendo

这似乎不适用于我，滚动条隐藏/无法正常工作 – 2012-10-18 15:22:19

因为代码是/正在运行，所以几个月后还没有看过它完善。 – 2012-10-19 08:23:04

@ChrisEdwards嘿是你能找到一个解决？陷入类似的问题，但这种解决方案不适合我。 – newbie 2017-05-19 01:00:20

它是固定的，看到的细节问题，如果任何人都可以碰到到这个问题。

来源

2011-05-06 11:00:04

通过将lineWrapping选项设置为true，可以很容易地在CodeMirror中启用自动换行。例如：

<textarea id="code" name="code"> 
     ... 
    </textarea> 

    <script> 
     var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
     tabMode: "indent", 
     matchBrackets: true, 
     theme: "night", 
     lineNumbers: true, 
     lineWrapping: true, 
     indentUnit: 4, 
     mode: "text/javascript" 
     }); 
    </script>

来源

2012-05-13 15:04:27 fywe

正如上面克里斯评论，在问题中描述的解决方案并不（总是？）工作了。

但是，将max-width: ...ex;添加到CSS似乎强制水平滚动条。

（不这样做，例如只使用width: ...，仅配置CodeMirror与lineWrapping: true（如fywe的答案），可以防止它明目张胆地伸展排长队禁区，但lineWrapping有其自身的缺陷（如导航不友好的Home/End键）

来源

2013-05-13 00:52:29

感谢您的加入:) – 2013-05-13 14:27:29

CodeMirror（JS代码高亮）在textarea的文本超过textarea的宽度

回答

相关问题