欢迎来到Java学习网!
设为首页 | 加入收藏
当前位置: 首页 > Java语言 > JavaScript >

Java学习网整理:如何让SyntaxHighlighter显示的长代码自动换行


  以前用SyntaxHighlighter插入的代码经常出现下面有个滚动条的情况,非常难看,不难看出,原因是由于有些代码太长造成的,那么如何去掉滚动条呢?显然,如果长代码能自动换行,问题就能得到解决。

SyntaxHighlighter显示的长代码自动换行方法一:

找到syntaxhighlighter3\styles文件夹下的shCore.css和shCoreDefault.css文件,找到下面的代码

.syntaxhighlighter .line {
    white-space: pre !important;
}

将中间的一行删除或注释掉。如下:

.syntaxhighlighter .line {
    /*white-space: pre !important;*/
}

SyntaxHighlighter显示的长代码自动换行方法二:

找到syntaxhighlighter3 下的 shCore.css,找到下面的代码

  .syntaxhighlighter,

  .syntaxhighlighter div,

  .syntaxhighlighter code,

  .syntaxhighlighter table,

  .syntaxhighlighter table td,

  .syntaxhighlighter table tr,

  .syntaxhighlighter table tbody

{

  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  outline: 0 !important;

  background: none !important;

  text-align: left !important;

  float: none !important;

  vertical-align: baseline !important;

  position: static !important;

  left: auto !important;

  top: auto !important;

  right: auto !important;

  bottom: auto !important;

  height: auto !important;

  width: auto !important;

  line-height: 1.1em !important;

  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;

  font-weight: normal !important;

  font-style: normal !important;

  font-size: 10pt !important;

  min-height: inherit !important; /* For IE8, FF & WebKit */

  min-height: auto !important; /* For IE7 */

  word-break: break-all; /*解决代码过长不换行的问题*/

}

  添加word-break: break-all; 即可解决代码过长不换行的问题。
 

    相关教程
    推荐内容