整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
個完美的站長網站里面沒有代碼高亮的插件怎么能行！小編在用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文件！
如果本文對你有用的話請不要忘記分享關注哦！謝謝觀看！
面這種單詞直接打斷換行：
word-break （當行尾放不下一個單詞時，決定單詞內部該怎么擺放）
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（單詞截斷辦法，在全角截斷或單詞內部截斷）
也就是當因為單詞長度超過所設定文本寬度時，會另外起一行，而不是與之前的文字共同擠一行。
當文本因特殊字符或英文字母超出設定范圍內容的時候，可以使用上述兩種解決辦法，各有利弊，一個會另起一行，保證單詞完整性，一個會截斷單詞影響單詞語意。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
