顺晟科技
2019-08-16 15:31:36
542
wp发布文章不能换行主要的原因有很多,像升级程序未升级模板;或者免费模板样式缺失;也有可能是内容有一连串较长的英文字符,比如有些人粘贴的某个电驴链接或迅雷链接等。无论怎样,不换行总是很难看。所以接下来就把网上几种方法整理出来,并把我最终采用的方法。(红色部分就是我用的方法了)
1.代码的原因。代码是html的原始格式标签,一般情况下,我们把代码、命令 和 带空格 Tab 排版的文字放在 中,意思就是不管你是在可视化编辑器还是源码编辑器里面,只要你把内容放在了代码里面,那么你放进去时候格式是什么样的,输出就是 什么样的!在WordPress博客里,凡是在代码中的内容都不会自动换行。
解决方法有两种:
第一种最简单,就是在html代码模式下把代码去掉就OK了;
第二种就是彻底解决这种情况的办法-加代码。我们可以在css文件里加如下代码:
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
这点代码的意思是说即使遇到代码,一样自动换行!我用的是第二种方法,毕竟解决的比较彻底嘛,放进css文件之后再次刷新博客,自动换行成功!
2.内容包含长链接的,解决方法:
只要给包含文章内容的 id 或 class 选择器添加下面的css代码即可。
1 | #content .post{width:640px;white-space:normal;word-break:break-all;word-wrap:break-word;overflow:hidden;} |
3.解决的比较彻底。解决方法:
直接用css实现不换行/自动换行/强制换行,使用方法也是先看single.php中哪个样式是包含内容的,然后再style.css中找到相应的class或者id,直接修改。
一. 不换行
div{
white-space:nowrap;
}
二. 自动换行
div{
word-wrap: break-word;
word-break: normal;
}
三. 强制英文单词断行
div{
word-break:break-all;
}
20
2022-12
20
2022-12
28
2021-06
16
2019-08
16
2019-08
16
2019-08