解決 HTML5 移動端數字與圖片溢出問題的 CSS 方案

問題背景

在開發移動端網頁時，經常會遇到一個棘手的問題：將後台獲取的新聞內容（包含長串數字、URL 或大尺寸圖片）渲染到前台，設置容器寬度為 100% 後，普通文字能正常換行，但連續的數字、英文字符或圖片卻會撐破容器，導致頁面出現橫向滾動條，嚴重影響用戶體驗。由於數據來源於後台，無法在前端直接對字符串進行插入換行符處理。

核心原因

瀏覽器默認的換行規則是針對「單詞」進行的（以空格、連字符等為界）。連續的數字、字母或無空格的長字符串被視為一個不可分割的「單詞」，因此不會自動換行。圖片若未限制最大寬度，原始尺寸超過容器時同樣會撐開佈局。

解決方案

只需在內容容器的 CSS 中添加以下屬性，即可強制內容在邊界處換行並限制圖片尺寸：

.content-container {
    word-wrap: break-word;      /* 允許長單詞斷行換行 */
    word-break: break-all;      /* 強制在任意字符間換行，適用於中文/數字/英文混雜 */
    overflow-wrap: break-word;  /* 現代標準屬性，建議同時保留 */
}

.content-container img {
    max-width: 100%;            /* 圖片自適應容器寬度 */
    height: auto;               /* 保持縱橫比 */
    display: block;             /* 消除底部間隙 */
}

屬性詳解

• word-wrap: break-word（現已重命名為 overflow-wrap）：在單詞過長無法放置時，允許在單詞內部換行。
• word-break: break-all：更激進的策略，不區分語言，任意字符之間都可換行。對於中文內容混雜數字/英文的場景效果最佳。
• max-width: 100%：確保圖片、視頻等替換元素不超過父容器寬度，實現響應式縮放。

最佳實踐建議

1. 將上述 CSS 應用於所有動態渲染富文本的容器類（如 .article-body, .news-detail）。
2. 配合 box-sizing: border-box 使用，避免 padding/border 撐大容器。
3. 若使用 CSS 框架（如 Bootstrap），可直接使用內置類 .img-fluid 處理圖片響應式。

通過這幾行 CSS，即可徹底解決移動端數據溢出問題，無需修改後台數據結構或前端 JS 邏輯，兼容性極佳（IE5.5+ 全支持）。