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

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

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

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

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

自動(dòng)換行

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

英文單詞不拆詞

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

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

英文單詞兩端對(duì)齊、單詞不拆詞換行

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

舉個(gè)栗子

如果你是使用蘇醒同款主題：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)站文章頁(yè)，清除瀏覽器緩存后，刷新網(wǎng)站，看看，是不是湊效了。

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