SyntaxHighlighter单词包装？

Question

我在我的首页中使用了语法高亮笔来突出显示代码。但我遇到了一个问题，即当代码长度大于<div>长度时，代码中的单词不会被包装。

​

然后我谷歌了一下。找到了下面提到的一种方法：

pre,code{ 
white-space:pre-wrap;/*css-3*/ 
white-space:-moz-pre-wrap;/*Mozilla,since1999*/ 
white-space:-pre-wrap;/*Opera4-6*/ 
white-space:-o-pre-wrap;/*Opera7*/ 
word-wrap:break-word;/*InternetExplorer5.5+*/　　
} 

但是，出现了一个新问题，行号与实际代码行不相对应：

​

我的问题是：

• 如何避免代码溢出，同时保持代码行与实际的原始代码行相对应？

Answer 1

您可以使用CodeMirror编辑器。它有许多功能支持，包括文字包装和只读，就像崇高的文本编辑器。

Answer 2

我想它确实与原始的代码行相对应。由于包装的原因，你的编号被弄乱了。尝试用JavaScript包装代码-添加新的行符号\n和插入符号返回符号\r (取决于您的编程环境及其设置)，看看它是否有用。

Answer 3

您也必须对JavaScript做一些更改。

在这里的评论部分的底部对此进行了解释，包括jsfiddle：https://bitbucket.org/alexg/syntaxhighlighter/issue/182/version-3-making-code-wrap中的演示