WordPress 文章英文單詞溢出/單詞斷詞等問題

wordpress 2023-10-22編輯：重慶網(wǎng)站建設(shè) WordPress 溢出 單詞

很多時候，WordPress中文主題都可能在開發(fā)的時候，漏掉了對文章對英文的排版優(yōu)化，出現(xiàn)幾種情況：

1. 長英文、長鏈接，溢出超過顯示范圍，沒有換行
2. 英文單詞換行時，在單詞中斷開了

解決以上兩個問題呢，分別有 2 套方案。

自動換行

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

英文單詞不拆詞

word-break: keep-all;  //只能在半角空格或連字符處換行。
word-wrap: break-word; //當(dāng)單詞太長時，先嘗試換行，換行后還是太長，單詞內(nèi)還可以換行。
white-space: pre-wrap; //保留所有的空格和回車，但是允許折行，注意：出現(xiàn)大量空白時，可不加。

一般來說，需要在屬于文章內(nèi)容的樣式表中，增加以下的 css 樣式，即可解決。

英文單詞兩端對齊、單詞不拆詞換行

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

舉個栗子

如果你是使用蘇醒同款主題：PandaPRO 主題，或者恰好有安裝積木插件，那么就可以在不更改主題文件代碼的前提下，完成改造。

首先，找到文章內(nèi)容外層?p?的樣式標(biāo)簽：.post-content p, .post-content figure
在積木優(yōu)化設(shè)置中，找到自定義模塊，在頭部自定義代碼中插入樣式代碼，如下圖：

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

WordPress 文章英文單詞溢出/單詞斷詞等問題

保存，返回網(wǎng)站文章頁，清除瀏覽器緩存后，刷新網(wǎng)站，看看，是不是湊效了。

• 上一章：WordPress標(biāo)簽聚合頁優(yōu)化思路分享
• 下一章：使用插件限制、禁止 WordPress 生成某些...