HTML的經(jīng)常會(huì)遇到一長串連續(xù)的字幕或者數(shù)字在頁面中沒辦法折斷換行，導(dǎo)致了頁面排版很亂。

默認(rèn)情況下，一個(gè) DIV或者其他元素的文本，如果都是無文字分隔符，無空格，則不會(huì)自動(dòng)換行。

其實(shí)用一句很經(jīng)典的CSS，就可以解決這個(gè)大麻煩。代碼如下：

<div class="detail_title" style="word-break: break-all;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

把這段代碼放到HTML文件里試試看。

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

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

問題描述

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

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

解決方法

其實(shí)通過修改引用的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>

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

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