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

本文介绍了如何在Firefox中解决pre标签内容不自动换行的问题,通过在ueditor的CSS文件中添加word-break:break-all属性,并给出了适用于不同ueditor版本的方法。同时提供了在前端模板样式中的解决方案,包括使用white-space:pre-wrap和word-wrap:break-word来实现文本自动换行。

网上搜索的解决办法(测试无效)

找到高亮代码显示的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>

 完成,如果对你有帮助还请关注我哦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

于飞SEO

如果对你有帮助,就是我的动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值