WordPress 文章英文单词溢出/单词断词等问题

WordPress 文章英文单词溢出/单词断词等问题

wordpress 2024-9-22编辑：深圳网站建设阅读（） WordPress 溢出 单词

很多时【shí】候，WordPress中文主题都可能【néng】在开发的时候，漏掉【diào】了对文章对英【yīng】文的排【pái】版优化【huà】，出现几种情况：

1. 长英文、长链接，溢出超过显示范围，没有换行
2. 英文单词换行时，在单词中断开了

解决以上两个问题呢，分别有 2 套方案。

自动换行

word-wrap: break-word; 
word-break: normal;

英文单词不拆词

word-break: keep-all;  //只能在半角空格或连字【zì】符处换行。
word-wrap: break-word; //当单词太长时，先尝试换行【háng】，换行后还是太长，单词内还【hái】可【kě】以【yǐ】换行【háng】。
white-space: pre-wrap; //保【bǎo】留所有的空格和【hé】回【huí】车，但是允许折行【háng】，注【zhù】意：出现大量空白时，可不加。

一般来说，需要在属【shǔ】于【yú】文章内容的样式表中，增【zēng】加以下的 css 样【yàng】式【shì】，即可解决。

英文单词两端对齐、单词不拆词换行

word-break: keep-all; 
word-wrap: break-word; 
white-space: pre-wrap;
text-align: justify;

举个栗子

如果你是使用苏醒同款主题：PandaPRO 主【zhǔ】题【tí】，或者恰好有安装积木插件，那么就【jiù】可以在【zài】不更【gèng】改主题文【wén】件代码的前提【tí】下，完成改造。

首先，找到文章内容外层 p 的样式标签：.post-content p, .post-content figure
在积木优化设置中，找到自定义模块，在头部自定义代码中插入样式代码，如下图：

.post-content p,
.post-content figure {
    word-break: keep-all;
    word-wrap: break-word;
    white-space: pre-wrap;
}

WordPress 文章英文单词溢出/单词断词等问题

保存，返回网站文章【zhāng】页，清除【chú】浏览【lǎn】器缓存【cún】后，刷【shuā】新网站，看看，是【shì】不是凑效了。

• 上一章：WordPress标签聚合页优化思路分享
• 下一章：使用插件限制、禁止 WordPress 生成某些...