全方位站长技能、SEO优化学习平台
免费香港宝塔虚拟主机 免费香港Kangle虚拟主机
当前位置:网站首页 > Zblog笔记 > 正文

Zblog编辑器纯文本过长不自动换行的解决方法

作者:文煞发布时间:2025-11-24分类:Zblog笔记浏览:674


温馨提示:手机扫码可阅读当前文章!
文章简介:用zblog后台编辑器编辑文章的时候,偶尔会发现,复制纯文本进去以后,不自动换行!前端总数出现撑破页面的情况,不知道有没有朋友遇到过这种情况!通常让html页面的文本内容自动换行的方法有如下几种:1、后台修改主题CSS(最常用):登录Zbl...

用zblog后台编辑器编辑文章的时候,偶尔会发现,复制纯文本进去以后,不自动换行!前端总数出现撑破页面的情况,不知道有没有朋友遇到过这种情况!通常让html页面的文本内容自动换行的方法有如下几种:

Zblog编辑器纯文本过长不自动换行的解决方法  第1张

1、后台修改主题CSS(最常用):登录Zblog后台,进入“外观”-“主题”,点击当前主题的“编辑”按钮。找到主题的样式文件(一般是style.css),在文件末尾添加强制换行代码,比如  .article-content { overflow-wrap: break-word; word-break: break-all; } ,其中 .article-content 需匹配你主题中文章内容对应的CSS类名,可按F12用浏览器开发者工具查看。保存修改后刷新页面即可生效。


2、 编辑单篇文章时临时处理:若仅某篇文章有长文本换行问题,编辑时可切换到HTML模式。给过长文本的容器标签加内联样式,例如  <div style="overflow-wrap: break-word;">这里是过长的纯文本内容</div> ,适合临时快速解决单篇内容的问题。


3、处理编辑器输入框本身:若编辑时输入框内就不换行,可同样通过主题编辑功能,找到编辑器输入区域对应的CSS样式,添加  white-space: pre-wrap; overflow-wrap: break-word; ,既能保留文本原有空格格式,又能让输入的长文本自动适配输入框宽度换行。


但是zblog可能有点奇怪,以上几种方法都不生效,没有效果的原因在哪里了?我也是折腾了好几遍,总算是发现一个有趣的事情,在zblong后台编辑器,有时候复制纯文本进入编辑器里面,他会自动给你添加一个<span标签>,这个span变迁的样式是: "text-wrap: wrap;",比如:


 <span style="text-wrap: nowrap;">撸了个SEO关键词批量挖掘工具,支持Google/百度/Bing/搜狗/360五个搜索引擎,可以导出CSV/JSON/TXT格式,绿色版exe下载就能用。主要是自己做SEO用的,市面上那些工具还收费,这个几小时就能做出来,干脆自己写一个。现在分享出来给大家用,永久免费,不会收费。</span>


text-wrap: wrap的作用就是强制文本在一行显示,不换行!既然我们知道问题所在,那有没有好的办法呢?那就是去掉禁止换行的span标签。这时候你会发现,这个标签是自动生成的,每一次去手动替换就相当麻烦!我们有两种解决方法:


1、传入数据库之前,用php和正则规则把它替换掉,可完美解决!


2、不影响提交数据,我们在主题模板里给他替换掉。


相对于第一种方法,比较复杂,还得去研究官方文档然后再来了解源码结构,进行相关逻辑的处理,相比较直接在主题模板里替换,明显后者技术成本更低!处理方法:


第一步:zb_users/theme/(你正在使用的模板文件夹)

第二步:在zb_users/theme/(你正在使用的模板文件夹)/template下找到post-single.php(通常是这个文件)

第三步:post-single.php把里的{$article->Content}替换为如下代码:


{php}
$clean_string = preg_replace('/<span\s+style\s*=\s*["\']text-wrap:\s*nowrap;?["\']\s*>(.*?)<\/span>/i', '$1', $article->Content);
echo $clean_string;
{/php}

这样,然后到zblog后台更新缓存或者模板编译文件,就能完美去除zblog编辑器自动生成的<span style="text-wrap: wrap;">中禁止换行的样式了!

欢迎您,来自美国的朋友,您的IP:216.73.216.136,您的网络:


Zblog笔记排行
随机推荐
猜你喜欢

服务热线

1888888888

要发发发发发发

站长微信公众号

站长微信公众号

分享:

支付宝

微信