铃灵吧 关注:362贴子:127
  • 2回复贴,共1

如何让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; 即可解决代码过长不换行的问题。


1楼2014-10-21 23:51回复
    这个理由好机智········


    来自Windows8客户端2楼2016-04-09 11:35
    回复
      一块来学习B


      3楼2016-04-09 12:08
      回复