textarea中的css – CodeMirror(JS代码高亮)文本超过了textarea宽度

前端之家收集整理的这篇文章主要介绍了textarea中的css – CodeMirror(JS代码高亮)文本超过了textarea宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我今天一直在使用CodeMirror创建一个小环境,我可以编辑存储在数据库中的一些 PHP代码(是的,我知道这可能是有害的,但是PHP代码对于普通用户来说是不可访问的).

所有的工作都很棒,编辑工作,代码高亮作品,缩进标签工作,但有一件事困扰我一段时间,我似乎找不到解决方案.我的CodeMirror编辑器textarea中的代码超过了textarea,并且将在我的屏幕之外的某处消失(参见本文末尾的截图).

我想让这段代码继续在下面一行(没有添加额外的亚麻).这是一个已知问题和/或易于解决

这是一个截图:
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.

解决方法

通过将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>

猜你在找的CSS相关文章