html 编辑器里自动换行,解决百度编辑器前端代码语言不能自动换行问题

小编上次解决了百度编辑器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了.到这里还没完,为什么?因为改成了自动换行,行号对齐问题随之而来,可以在本站搜索解决行号错位问题.