📋 Blog Detail 破板測試內容（SL-43348）

以下每一段都是常見的破板情境，請逐一檢查 desktop / tablet / mobile 是否都正常顯示。

1️⃣ 超長 div（固定寬度 3000px）

這個 div 寬度寫死 3000px，沒有 overflow 防護就會把版面撐爆 →→→ 應該被左欄裁切，整頁不可橫滑

2️⃣ 超長 div（內含不換行長字串）

ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文花哈哈我是中文

3️⃣ 超寬圖片（4000px 寬）

超寬測試圖 

 

4️⃣ 超寬 code block（單行不換行）

const veryLongVariableName = "this_is_a_super_long_string_that_should_not_break_the_layout_const_veryLongVariableName  _this_is_a_super_long_string_that_should_not_break_the_layout_1234567890_abcdefghijklmnopqrstuvwxyz";

 

 

5️⃣ 超寬 table（20 欄）

欄1欄2欄3欄4欄5欄6欄7欄8欄9欄10欄11欄12欄13欄14欄15欄16欄17欄18欄19欄20
資料1資料2資料3資料4資料5資料6資料7資料8資料9資料10資料11資料12資料13資料14資料15資料16資料17資料18資料19資料20

 

 

6️⃣ 超長 URL（不可斷字）

請點擊這個連結 → https://www.example.com/very/long/path/to/some/resource/that/has/no /breaks/in/the/url/abcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqrstuvwxyz1234567890

 

 

7️⃣ iframe embed（寬度 1200 未限制）

 

 

8️⃣ inline-flex 多個寬 box

寬 800px box A
寬 800px box B
寬 800px box C

 

 

9️⃣ 控制組（一般正常內容，檢查 regression）

這是一段正常的中英混合段落 normal paragraph content。圖片、文字、列表都應該維持原樣。

  • 項目一
  • 項目二
  • 項目三

一般尺寸圖