小编上次解决了百度编辑器UEditor,使用代码语言时,前端没有语法高亮显示,及行号的问题.自解决完之后又发现语法高亮的CSS样式并没有自动换行,这样在不够宽的页面显示特别不友好.这次特意来修改一下.
首先要找到上次我们引入的语法高亮的CSS文件,文件名为:"shCoreDefault.css"
找到如下的代码:.syntaxhighlighter {
width: 100%!important;
margin: .3em 0 .3em 0!important;
position: relative!important;
overflow: auto!important;
background-color: #f5f5f5!important;
border: 1px solid #ccc!important;
border-radius: 4px!important;
border-collapse: separate!important;
}
修改为:.syntaxhighlighter {
width: 100%!important;
margin: .3em 0 .3em 0!important;
position: relative!important;
overflow: auto!important;
background-color: #f5f5f5!important;
border: 1px solid #ccc!important;
border-radius: 4px!important;
border-collapse: separate!important;
word-break:break-all;
}
也就是添加了一行强制换行word-break:break-all;
这样就OK了.到这里还没完,为什么?因为改成了自动换行,行号对齐问题随之而来,可以在本站搜索解决行号错位问题.