个完美的站长网站里面没有代码高亮的插件怎么能行！小编在用SyntaxHighlighter插件的时候就遇到了一个非常脑热的问题，所以分享一下解决方法！

SyntaxHighlighter是一个使用JavaScript编写的功能齐全的代码语法高亮的软件。

问题描述

SyntaxHighlighter是根据代码中的换行符分配行号的。但是如果一行代码或注释太长的话在页面中显示时需要分成多行显示，这时行号就对不上了！就像下图的情况

左侧的行号和右侧的内容是不对齐的

解决方法

其实通过修改引用的CSS样式使其强制不换行，但这种方法的话下方会出现横向滚动条，太不美观了，权衡利弊，果断抛弃。

我的原理是把行用each遍历一下，计算出右侧的行高，然后把得到的值赋给左侧的行号列。

代码如下：

<script>

$(window).load(function(){

$('.code .line').each(function(index) {

var yqhg=$(this).height();

$('.gutter .line:eq('+index+')').attr('style','height:'+yqhg+'px !important')

});

});

</script>

插入到页面底部（SyntaxHighlighter.all()方法后面也行），本方法是基于JQuery写的，大家用这种方法之前请务必引入JQuery文件！

如果本文对你有用的话请不要忘记分享关注哦！谢谢观看！

面这种单词直接打断换行：

这里涉及到两个css属性（很多年傻傻分不清）：

1. word-break （当行尾放不下一个单词时，决定单词内部该怎么摆放）

2. word-wrap（当行尾放不下时，决定单词内是否允许换行）

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行（强行上，挤不下的话剩下的就换下一行显示）。

keep-all 只能在半角空格或连字符处换行（放不下了，那就另起一行展示）。

normal 只在允许的断字点换行（单词太长，换行显示，再超过一行就溢出显示）。

break-word 在长单词或 URL 地址内部进行换行（当单词太长时，先尝试换行，换行后还是太长，单词内还可以换行）。

还有话说！

注意，上面这些换行神马的都是针对英文单词，像CJK(中文/日文/韩文)这样的语言就算了，因为他们不需要（真不影响阅读）。

在来看开头那张图里的问题，你加上 word-break: keep-all;word-wrap: break-word;正常就可以了。如有问题，欢迎讨论评论区或者直接私信。

本换行问题示范

当我们不设置换行的时候，默认浏览器会因为字母或特殊符号导致不进行自动换行。特别是在移动端网页会出现左右移动导致页面不美观。

三个重要属性

1.word-wrap（允许单词换到下一行）

2.white-space（文本出现空格符的解决办法，忽略或连续空格合并）

3.word-break（单词截断办法，在全角截断或单词内部截断）

CSS代码

解决办法1（英文长度过长，则另起一行）

也就是当因为单词长度超过所设定文本宽度时，会另外起一行，而不是与之前的文字共同挤一行。

解决办法2（允许单词内部截断换行）

总结

当文本因特殊字符或英文字母超出设定范围内容的时候，可以使用上述两种解决办法，各有利弊，一个会另起一行，保证单词完整性，一个会截断单词影响单词语意。