---
title: 翻成英文、日文後頁面跑版，多語網站怎麼修
description: 英文變長、日文字型缺字、各語言模板各改各的：多語網站翻譯後跑版的三個成因與對應修法。
url: "https://wptoolbear.com/docs/multilingual-translated-page-layout-broken/"
updated: "2026-09-13"
category: 多語與翻譯
---

# 翻成英文、日文後頁面跑版，多語網站怎麼修

**快速答案：**翻譯後跑版幾乎都是三件事：字變長或變短、字型沒有那個語言的字、每個語言各有一份模板但只改了其中一份。開兩個語言版本並排，用瀏覽器開發者工具比對同一個區塊，通常一眼就看出差在哪。

## 為什麼會這樣

英文比中文長三到五成，日文的標點與換行規則又不一樣，寫死寬度的按鈕、卡片標題、mega menu 欄位就會被撐開或折成兩行。佈景設定的西文字型如果沒有日文字，瀏覽器會退回系統字型，行高、粗細整個變掉。更常見的是模板分身：在 WPML 加 Elementor 的架構下，每個語言的頁首、頁尾、區塊都是獨立副本，你在英文版刪掉一個圖層，日文版還留著。最後是語言切換器本身，插進頁首後把導覽列擠下去。

## 怎麼處理

1. 開兩個視窗放同一頁的兩個語言，按 F12 檢查跑掉的元素，看差的是寬度、行高還是 `font-family`。
2. 字長問題：按鈕與標題改用最小寬度加自動換行，不要寫死；長句改短句。
3. 字型問題：在佈景或 Elementor 的全站字型設定加上該語言的後備字型，例如日文加 Noto Sans JP，中文加 Noto Sans TC。
4. 模板問題：修好一個語言後，到另一個語言的同一個模板再做一次；或改寫在全站自訂 CSS 用共用 class，一處改全部語言。
5. 切換器問題：改成下拉或圖示，放進既有的選單項目，而不是另外多一列。
6. 改完清快取，手機再看一次，行動版跑版的機率比桌機高。

## 我們實際遇過的情況

一家外銷製造商的日文頁跑版，我們的做法是把日文版跟其他語言並排，先比對同一個區塊的字型與行高差在哪。同一個站有一塊白色背景怎麼刪都刪不掉，客戶只在英文版找到並移除，其他語言各自的模板都還留著那個圖層。另一個網站則是加上語言切換器之後，頁首跟著跑版。

## 什麼時候該找人

跑版是在更新佈景、Elementor 或 WPML 之後才出現的話，多半是相容性問題，硬加 CSS 只是把症狀蓋住，下次更新又會回來。

## 常見問題

### 為什麼只有日文版跑版？

多半是佈景字型沒有日文字，瀏覽器退回系統字型導致行高不同；在全站字型加上 Noto Sans JP 之類的後備字型即可。

### 英文版修好了，其他語言還是壞的？

WPML 加 Elementor 下每個語言的模板是獨立副本，要到每個語言的同一模板再改一次，或改用全站共用 CSS。

網站正在跑版、更新後壞掉？[網站救援當日受理](https://wptoolbear.com/rescue/)；想有人每月幫你顧著更新：[網站守護方案](https://wptoolbear.com/guardian/)。