LESSON-05 · TOPIC 04
能先以 scrollWidth/clientWidth 確認橫向溢位，再針對長字串根因使用 overflow-wrap，而不是隱藏捲軸。
能先以 scrollWidth/clientWidth 確認橫向溢位，再針對長字串根因使用 overflow-wrap，而不是隱藏捲軸。
overflow-x:hidden 只遮住症狀，仍可能裁掉內容、焦點或操作區；修正根因才能保留可讀與可操作性。
要修改的檔案：files/starter/style.css
定位：在 Console 比較長 URL 元素與文件的 scrollWidth/clientWidth，確認第一個超寬元素。｜依 module-4 定位，只修改「overflow 症狀與根因」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
手機版只有一張含長 URL 的服務卡造成整頁水平捲動。
起始狀態：卡片寬度受容器限制，但長 URL 使用 overflow-wrap:normal。
runtime 的 overflow-wrap 由 normal 變 anywhere；人工重測時 scrollWidth 不再大於 clientWidth。
驗收證據：runtime before=normal、after=anywhere、property=overflow-wrap；人工證據為修正後 scrollWidth<=clientWidth
390px 出現水平捲軸、長 URL/訂單編號撐開卡片，或 focus outline 被裁切時。
常見混淆：overflow-wrap 修長字串，不會修正寫死 900px width；不同根因需要不同修正。
這段程式是理解起點，不是要你直接跳過 Starter。
先量內容是不是超出去，再找是哪個盒子或哪段不能換行的文字把版面撐開。
正式說法：Overflow 發生於內容超出 box 的 padding box；overflow-wrap:anywhere 允許原本不可斷的字串在必要處換行，但不應取代尺寸與 min-content 根因分析。
.long-url { overflow-wrap:anywhere; }每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：在 Console 比較長 URL 元素與文件的 scrollWidth/clientWidth，確認第一個超寬元素。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「在 Console 比較長 URL 元素與文件的 scrollWidth/clientWidth，確認第一個超寬元素。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 在 Console 比較長 URL 元素與文件的 scrollWidth/clientWidth，確認第一個超寬元素。。
檔案：files/starter/style.css 定位：在 Console 比較長 URL 元素與文件的 scrollWidth/clientWidth，確認第一個超寬元素。
要做：執行實驗替長 URL 切換 wrap-anywhere，讀取 computed overflow-wrap，再重新比較卡片 scrollWidth/clientWidth。
預期：runtime 的 overflow-wrap 由 normal 變 anywhere；人工重測時 scrollWidth 不再大於 clientWidth。
證據：runtime before=normal、after=anywhere、property=overflow-wrap；人工證據為修正後 scrollWidth<=clientWidth
卡住先查：在 Console 比較長 URL 元素與文件的 scrollWidth/clientWidth，確認第一個超寬元素。
檔案：files/starter/style.css 定位：在 Console 比較長 URL 元素與文件的 scrollWidth/clientWidth，確認第一個超寬元素。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 overflow-wrap 由 normal 變 anywhere；人工重測時 scrollWidth 不再大於 clientWidth。
證據：runtime before=normal、after=anywhere、property=overflow-wrap；人工證據為修正後 scrollWidth<=clientWidth
卡住先查：在 Console 比較長 URL 元素與文件的 scrollWidth/clientWidth，確認第一個超寬元素。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
https://example.com/services/this-is-a-very-long-unbroken-service-reference-number-2026
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先不要隱藏 overflow；找出第一個 scrollWidth 大於 clientWidth 的元素。
若根因是不可斷長字串，只加入 overflow-wrap:anywhere。
完整解答與原因：長 URL 的 min-content 寬度撐開卡片；anywhere 提供必要斷點，保留全部文字並讓 scrollWidth 回到 clientWidth 內。