CHAPTER 07 · PRACTICE WORKSPACE
完成整齊且不溢出的作品卡片列表
TASK STATUS
修改檔案：style.css
完成後看見：作品卡片依寬度自動排成多欄
修改檔案：style.css
完成後看見：卡片之間留有整齊空隙
修改檔案：style.css
完成後看見：長網址會換行且不超出卡片
WORKSPACE
已完成 TASK-02；先核對可見結果，再前往 TASK-03。
FOCUS TASK · TASK-03
比較：換行保留內容可讀性，隱藏只把問題藏起來；長網址應優先能在卡片內換行。
現在做：在 Checkpoint 2 的 DevTools 先把 .project-link 暫時設為 overflow-wrap: anywhere，於 390px 寬度觀察網址完整換行；移除後改成 overflow: hidden、white-space: nowrap、text-overflow: ellipsis，比較內容被保留與被截斷的差異；最後恢復 overflow-wrap: anywhere。
預期：能用同一條長網址分辨換行是保留內容、hidden／ellipsis 是隱藏內容；標準答案要讓網址全文可讀，不能用裁切消除證據。
證據：留下 390px 寬度的換行與截斷對照，並展示最後 .project-link 的 computed overflow-wrap 與頁面 scrollWidth／clientWidth。
比較：一般文字能換行不代表長 URL 也能換行，必須用最長內容實際驗證。
現在做：在 Checkpoint 2 的 Elements 暫時把第二張卡的「查看作品」文字換成不含空白的長 URL，於 390px 重跑原操作；再恢復一般文字，對照兩種內容的換行結果，最後用第一張長 URL 做正式驗收。
預期：能說明一般文字正常換行不代表沒有空白的 URL 也安全；只有用邊界內容實測，才能證明 .project-link 的規則真的保護卡片。
證據：留下第二張卡替換前後的 390px 對照，並指出正常文字與長 URL 都沒有造成頁面水平捲動。
完成條件：DONE-03：長網址會換行且不超出卡片
第 06 章交棒
上一章已完成橫向導覽與左右兩欄；本章把共同父層的排列責任擴成同時管理列與欄，並處理長內容。
整理品牌故事與商品特色。
https://portfolio.example.com/projects/coffee-brand-story-and-product-showcase清楚呈現活動資訊與報名流程。
查看作品整合文字、圖像與學習歷程。
查看作品這是本地練習目標；卡片連結都指向這個頁內區塊，長網址文字用來驗收卡片內換行，不需要連線。
CONTINUE
前往 Solution，依要求完成「處理過長網址溢出」。