【亲测有效】百度编辑器ueditor前台代码高亮无法自动换行解决方法

网上搜索的解决办法（测试无效）

找到高亮代码显示的css文件  /e/data/ecmseditor/ueditor/third-party/SyntaxHighlighter/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;

}

修改代码如下:

.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;

word-break:break-all;//添加的代码

}

具体的路径根据你的ueditor做改动:就是加上  word-break:break-all;  可能不同的ueditor版本css写法不一样,只要对应的位置加上这个强制换行就可以了

有效解决方法

问题界定：各浏览器对pre标签的解释问题，针对 firefox，怎么使pre标签内容自动换行？

处理方法：在前台文章模版样式中加入以下样式代码

<style type="text/css">

    pre {

        white-space: pre-wrap;

        word-wrap: break-word;

    }

</style>

 完成，如果对你有帮助还请关注我哦！

Ueditor plus

默认的代码块不换行，效果如下：

添加一行word-break:break-all;

.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;

}

由于此shCoreDefault.css文件删除了空格和换行，所以可读性非常差，可以搜索.syntaxhighlighter{  然后添加word-break:break-all;

然后清理浏览器缓存，再访问查看效果：

网上也找到了word-break 参数说明：

语法：

word-break : normal | break-all | keep-all

参数：

normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行

break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明：

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。

对于中文，应该使用break-all 。

本以为问题得到了彻底解决，但在电脑端访问此文章，发现依然存在不会自动换行的情况，如下图：

一开始以为缓存原因，清理缓存，更换了浏览器测试还是存在问题。只要通过chrome 浏览器F12开发者模式，去查看css样式情况，在一个个样式排查下来，找到了罪魁祸首。

white-space:nowrap到底什么作用，网上查了查资料：

white-space:normal; 默认。依照亚洲语言和非亚洲语言的文本规则，允许在字内换行

white-space:pre-wrap; 只对中文起作用，强制换行

white-space:nowrap;  强制不换行，中文因为都起作用

white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现

于是找到此style.css文件，搜索找到white-space: nowrap； 更改为 white-space: normal；保存以后清理浏览器缓存，再次访问查看效果，发现已经自动换行。