第 08 堂｜內容變長，網站也接得住

你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。

情境與本次輸入：承接第7堂六張作品、600／1024斷點與16／24間距。保留APPA、紫綠tokens與既有鍵盤焦點。提供36字標題「小型工作室品牌與網站作品整理計畫讓手機平板桌面都能清楚閱讀每一項服務資訊」、一張600×900直幅圖與一張1200×500橫幅圖及範例長網址。這些皆為教學素材，並非真實客戶成果。中文標題與contain原已可用，不假設全部都會壞；先觀察長網址段落是否超寬。

本次任務：我已親手在第一張作品換指定36字標題、加範例長網址，在前兩張換直幅與橫幅圖，六筆摘要主旨與角色保留，兩段圖像描述已依新素材更新。請先依附檔與觀察產一份320／390／768／1280的逐項測試表，包含標題完整換行、圖片不拉伸、網址不超寬、導覽與六個入口。列預期、實際待填、元素與證據位置；不要替我勾成功，這次不改HTML或CSS。既有contain留白與中文正常換行不能算成故障；沒有證據不猜壞在哪裡。

請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。

你是協助零基礎學員的網站開發助手。我使用 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 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。

情境與本次輸入：承接第7堂六張作品、600／1024斷點與16／24間距。保留APPA、紫綠tokens與既有鍵盤焦點。提供36字標題「小型工作室品牌與網站作品整理計畫讓手機平板桌面都能清楚閱讀每一項服務資訊」、一張600×900直幅圖與一張1200×500橫幅圖及範例長網址。這些皆為教學素材，並非真實客戶成果。中文標題與contain原已可用，不假設全部都會壞；先觀察長網址段落是否超寬。

本次任務：獨立故障版只有第一張作品的36字h3在320px不換行。依DOM、Computed與完整CSS確認末端.works-grid > .work-card:first-child h3的white-space:nowrap，只移除這一個故障區塊，恢復原正常換行。不刪或縮短標題、不改字級、網格、長網址wrap、圖片、APPA，不用!important或隱藏body溢出。提供最小差異，區分已確認原因與待實測，列320／390／768／1280、邊界欄數及六個入口的真實鍵盤回歸。

請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。