長網址把手機版撐開？換行之外，還要驗收文字完整

頁面在電腦上看起來正常，縮窄後卻要左右拖動，才能讀完一段網址。把超出畫面的內容藏起來，雖然可能不再出現橫向捲動，讀者卻可能少看到一截。今天只練一件事：讓長字串在窄版換行，同時保留完整文字。

適合自己做網站、使用 AI 建站，或要驗收頁面的小型團隊、工作室與個人。準備桌面 Chrome、可編輯的本機練習頁或測試站，以及一段沒有私人資訊的長字串。先在測試環境操作，別直接修改正式網站。

【先分清「換行」與「刪掉」】

MDN 說明，CSS 的 overflow-wrap 可控制瀏覽器是否在原本難以斷行的字串內加入換行，避免文字溢出行框。anywhere 可作為這類長字串的處理選項；換行是版面安排，不需要把原始文字插入空白或刪短。

但一條 CSS 不會修好所有橫向溢出。固定寬度圖片、表格、容器尺寸與禁止換行的規則，都可能是別的原因。今天先把範圍限制在一段長網址，確認原因與修改結果，不宣稱全站響應式已完成。

【照四步做】

1. 在測試頁放一段虛構長網址。可用 https://example.com/ 後面接五次 abcdefghijklmnop，作為一整段純文字，不需真的開啟或建立該網址。把完整字串另存記事本，當作比對基準；不要用登入連結、重設密碼網址或私人資料。

2. 保存 A 原版，複製為 B 候選版。A 保留原本樣式，B 只在放這段文字的容器加上 overflow-wrap: anywhere;。若使用編輯器或 AI 協助，請明確要求只改這個區塊的換行規則，保留原文，不靠縮小字體、裁切內容或刪字來消除溢出。

3. 在 Chrome 開發人員工具開啟裝置工具列，選 Responsive，輸入寬度 320，再載入 A、B。看文字是否超出右邊，以及頁面是否能被左右拖動。這裡的寬度是 CSS 像素，不是手機型號，也不是把瀏覽器預覽比例調成 50%。兩版要用相同寬度、字體與內容比較。

4. 從 B 選取並複製整段文字，貼到記事本與基準核對，確認開頭、中段與結尾都在。再切回較寬視窗看一次，記下實際寬度與結果。不要因為窄版好看，就略過文字是否被截短或其他區塊受到影響。

【今天實際做的範例】

2026/11/04，我建立兩份本機 HTML，兩版都放同一段上述虛構網址。以 Chrome 自動化設定 320×700 的視窗內容尺寸，A 使用一般換行，B 加上 anywhere。這是設定瀏覽器視窗內容寬度，沒有宣稱已手動操作裝置工具列。

讀取頁面尺寸時，A 的可用寬度為 320、文件捲動寬度為 1052；B 的兩個數值都是 320。兩段原始文字逐字相同，表示這份範例中 B 消除了文件橫向溢出，同時保留文字。兩頁、截圖與量測結果已保存。

這些數字只屬於本機教材，會受字體與樣式影響，不是讀者必須重現的固定標準。今天沒有測真實手機、其他瀏覽器、螢幕閱讀器或全站版面，也沒有測網址連結能否開啟；寬版回查留作讀者練習，不能算成本日已測成果。

【怎樣算完成驗收】

交一張「版本／測試寬度／橫向溢出／文字完整性／待查問題」紀錄。預期 B 在本題窄版可讀、全文仍在；若還能左右拖動，就找出是否另有元件溢出，不直接把結論改成通過。

尺寸相等也不能單獨當完成證據。若套了 overflow: hidden，文字可能只是被藏住；若用了省略號，畫面可能只剩一部分。要同時檢查顯示、完整內容與實際可用性，不能只盯一個數字。

【常見錯誤與你的作業】

第一是把長網址手動加空白，導致複製後內容改變。第二是為了塞進畫面把字縮到難讀。第三是只試一個尺寸就說所有手機正常。Chrome 官方也提醒裝置模式只是近似模擬，重要頁面仍需安排真實裝置測試，沒有做就記未測。

若遇到表格、程式碼或需要保留排版的區塊，先確認閱讀需求，不要直接把本題做法套到每個元素。有些內容可能需要區塊內捲動或其他設計，應另訂驗收條件。

你的作業是完成 A、B 對照，再選一段自己有權使用的長字串重做。先寫預期，再記實際結果；不會編輯 CSS 時，可把原文、截圖與測試寬度交給製作者，要求說明改動位置。沒有改動權限就先交檢查紀錄，不把建議寫成已修復。

本機頁面與瀏覽器檢查可零額外工具費完成；網站編輯器、主機與委託修復可能另計。遇到登入或方案限制就記未完成，不需為這題購買額度。成果是一份能重查的窄版文字驗收，不是無障礙認證或排名承諾。

來源（2026-11-04 查核）：

整理／配圖：客脈 AI。配圖為 AI 示意圖，非真實網站或手機實測畫面。

0 0 10 0

拍手

留言

分享到：

Line

Facebook

複製連結

取消