先接任務，準備開始
少改一點，也要有完整證據。
APPA指向那段真正超寬的文字，陪你把AI修改範圍縮到必要位置。
這關帶走：保留全文，修復連續網址的窄版換行。
步驟 3／6 · 觀念 18 分鐘
先學一招：規則要貼近造成問題的元素
只改善長網址段落，不重設整個網站。
帶上你的裝備
- 自己的壓力測試works.html、完整CSS
- 實際超出的.work-reference文字與元素寬度、四尺寸前後證據
卡片已有min-width:0，欄軌已有minmax(0,1fr)；這次連續英文在一般段落仍可能超出。新增.work-reference只負責這段文字的換行，不需要重複改所有標題與圖片。
.works-grid .work-reference { overflow-wrap:anywhere; }跟著觀察
- 用框線確認超出的是第一張參考網址。
- 核對卡片min-width與欄軌規則已存在。
- 指出標題與APPA不在本次修改範圍。
這是你的實際操作確認，小測不會替你勾選。
步驟 4／6 · 實作 42 分鐘
動手挑戰：只修真正出問題的地方
保留全文，修復連續網址的窄版換行。
先準備
- 自己的壓力測試works.html、完整CSS
- 實際超出的.work-reference文字與元素寬度、四尺寸前後證據
親手選中網址段落，抄下實際寬度與CSS來源；再讓AI只修這個段落。
照這個順序開始
- 附上自己圈出的超寬元素與Computed。
- 用修改Prompt只加入網址換行規則，不修改內容。
- 測四尺寸、長標題、圖片與三頁導覽，記最小差異。
只修長網址段落換行
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的壓力測試works.html、完整CSS
- 實際超出的.work-reference文字與元素寬度、四尺寸前後證據
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 只新增參考網址段落換行規則，完整字串保留。
- 已正常標題、圖片、APPA與其他頁完全保留。
- 4．自己檢查結果
- 320／390網址完整且不撐破畫面。
- 768／1280欄數、圖片、六筆內容與入口不受影響。
只修長網址段落換行 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第7堂六張作品、600／1024斷點與16／24間距。保留APPA、紫綠tokens與既有鍵盤焦點。提供36字標題「小型工作室品牌與網站作品整理計畫讓手機平板桌面都能清楚閱讀每一項服務資訊」、一張600×900直幅圖與一張1200×500橫幅圖及範例長網址。這些皆為教學素材，並非真實客戶成果。中文標題與contain原已可用，不假設全部都會壞；先觀察長網址段落是否超寬。
本次任務：依附上的壓力測試結果，只讓.works-grid .work-reference的連續長網址可換行，保留網址全文；提供overflow-wrap:anywhere的最小CSS差異。卡片已有min-width:0、網格已有minmax(0,1fr)，不要重複重設。36字標題已完整換行、兩圖4:3 contain正常，不能刪文、截字、縮字、改圖片、用全頁overflow:hidden或重寫導覽。保留600／1024與16／24間距、六筆資料與服務入口，列四尺寸回歸與需我實測的部分。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
卡住時，APPA 給你一點線索
線索 1｜先找現象與證據
一般段落不一定繼承標題的overflow-wrap。
線索 2｜再縮小修改範圍
以.work-reference限定規則，修完核對字串完全相同。
回到自己的作品，逐項檢查
- 320／390網址完整且不撐破畫面。
- 768／1280欄數、圖片、六筆內容與入口不受影響。
- 未實際完成的AI、發布或裝置驗收記待完成。
尚未完成可以先往下看，之後再回來補做。
內容完整保留，畫面也能順順讀。
保留自己的修改差異與檢查結果。完成兩項操作確認再往下一關；也可以先閱讀，稍後補做。
關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。
留下自己的檢查紀錄
這是第 8 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。
重設會清除第 8 堂六步勾選，筆記、另一堂進度與網站檔案保留。