個(gè)完美的站長(zhǎng)網(wǎng)站里面沒(méi)有代碼高亮的插件怎么能行！小編在用SyntaxHighlighter插件的時(shí)候就遇到了一個(gè)非常腦熱的問(wèn)題，所以分享一下解決方法！

SyntaxHighlighter是一個(gè)使用JavaScript編寫(xiě)的功能齊全的代碼語(yǔ)法高亮的軟件。

問(wèn)題描述

SyntaxHighlighter是根據(jù)代碼中的換行符分配行號(hào)的。但是如果一行代碼或注釋太長(zhǎng)的話在頁(yè)面中顯示時(shí)需要分成多行顯示，這時(shí)行號(hào)就對(duì)不上了！就像下圖的情況

左側(cè)的行號(hào)和右側(cè)的內(nèi)容是不對(duì)齊的

解決方法

其實(shí)通過(guò)修改引用的CSS樣式使其強(qiáng)制不換行，但這種方法的話下方會(huì)出現(xiàn)橫向滾動(dòng)條，太不美觀了，權(quán)衡利弊，果斷拋棄。

我的原理是把行用each遍歷一下，計(jì)算出右側(cè)的行高，然后把得到的值賦給左側(cè)的行號(hào)列。

代碼如下：

<script>

$(window).load(function(){

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

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

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

});

});

</script>

插入到頁(yè)面底部（SyntaxHighlighter.all()方法后面也行），本方法是基于JQuery寫(xiě)的，大家用這種方法之前請(qǐng)務(wù)必引入JQuery文件！

如果本文對(duì)你有用的話請(qǐng)不要忘記分享關(guān)注哦！謝謝觀看！

面這種單詞直接打斷換行：

這里涉及到兩個(gè)css屬性（很多年傻傻分不清）：

1. word-break （當(dāng)行尾放不下一個(gè)單詞時(shí)，決定單詞內(nèi)部該怎么擺放）

2. word-wrap（當(dāng)行尾放不下時(shí)，決定單詞內(nèi)是否允許換行）

normal 使用瀏覽器默認(rèn)的換行規(guī)則。

break-all 允許在單詞內(nèi)換行（強(qiáng)行上，擠不下的話剩下的就換下一行顯示）。

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

normal 只在允許的斷字點(diǎn)換行（單詞太長(zhǎng)，換行顯示，再超過(guò)一行就溢出顯示）。

break-word 在長(zhǎng)單詞或 URL 地址內(nèi)部進(jìn)行換行（當(dāng)單詞太長(zhǎng)時(shí)，先嘗試換行，換行后還是太長(zhǎng)，單詞內(nèi)還可以換行）。

還有話說(shuō)！

注意，上面這些換行神馬的都是針對(duì)英文單詞，像CJK(中文/日文/韓文)這樣的語(yǔ)言就算了，因?yàn)樗麄儾恍枰ㄕ娌挥绊戦喿x）。

在來(lái)看開(kāi)頭那張圖里的問(wèn)題，你加上 word-break: keep-all;word-wrap: break-word;正常就可以了。如有問(wèn)題，歡迎討論評(píng)論區(qū)或者直接私信。

本換行問(wèn)題示范

當(dāng)我們不設(shè)置換行的時(shí)候，默認(rèn)瀏覽器會(huì)因?yàn)樽帜富蛱厥夥?hào)導(dǎo)致不進(jìn)行自動(dòng)換行。特別是在移動(dòng)端網(wǎng)頁(yè)會(huì)出現(xiàn)左右移動(dòng)導(dǎo)致頁(yè)面不美觀。

三個(gè)重要屬性

1.word-wrap（允許單詞換到下一行）

2.white-space（文本出現(xiàn)空格符的解決辦法，忽略或連續(xù)空格合并）

3.word-break（單詞截?cái)噢k法，在全角截?cái)嗷騿卧~內(nèi)部截?cái)啵?/p>

CSS代碼

解決辦法1（英文長(zhǎng)度過(guò)長(zhǎng)，則另起一行）

也就是當(dāng)因?yàn)閱卧~長(zhǎng)度超過(guò)所設(shè)定文本寬度時(shí)，會(huì)另外起一行，而不是與之前的文字共同擠一行。

解決辦法2（允許單詞內(nèi)部截?cái)鄵Q行）

總結(jié)

當(dāng)文本因特殊字符或英文字母超出設(shè)定范圍內(nèi)容的時(shí)候，可以使用上述兩種解決辦法，各有利弊，一個(gè)會(huì)另起一行，保證單詞完整性，一個(gè)會(huì)截?cái)鄦卧~影響單詞語(yǔ)意。