WordPress中百度编辑器ueditor前台代码语言无法自动换行解决办法

2020年9月23日14:44:38 发表评论 2,745 ℃

最近在博客发布一些需要插入代码语言的文章,发现在手机端访问,尽然显示不全,不能根据手机分辨率自动适配,访问体验极差,如下图:

WordPress中百度编辑器ueditor前台代码语言无法自动换行解决办法

由于编辑器使用的是百度编辑器ueditor,网上随便一搜便找到了解决方案。

找到wp-content/plugins/ueditor/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;
    border-radius: 4px!important;
    border-collapse: separate!important;
}

添加一行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;

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

WordPress中百度编辑器ueditor前台代码语言无法自动换行解决办法

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

语法:

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

参数:

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

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

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

说明:

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

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

本以为问题得到了彻底解决,但在电脑端访问此文章http://www.amd5.cn/atang_3727.html,发现依然存在不会自动换行的情况,如下图:

WordPress中百度编辑器ueditor前台代码语言无法自动换行解决办法

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

WordPress中百度编辑器ueditor前台代码语言无法自动换行解决办法

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;保存以后清理浏览器缓存,再次访问查看效果,发现已经自动换行。

WordPress中百度编辑器ueditor前台代码语言无法自动换行解决办法

【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: