PHP 資料庫長文字顯示不全？實為前端 CSS 截斷問題

現象描述

從資料庫讀取的長文本（如遊戲介紹）在網頁上僅顯示前幾十個字元，後續內容消失。資料庫確認資料完整，後端輸出也正常。

根本原因分析

經排查，這不是資料庫或 PHP 後端問題，而是前端 CSS 導致內容被截斷或隱藏。常見原因包括：

• 容器設定 overflow: hidden 且固定高度/寬度。
• text-overflow: ellipsis 強制單行省略。
• white-space: nowrap 導致不換行。
• 父層元素高度塌陷或 max-height 限制。

快速驗證方法

1. 在瀏覽器開發者工具（F12）選取該文字區塊，檢查 Computed Styles。
2. 暫時關閉 overflow、text-overflow、white-space 等屬性，觀察是否完整顯示。
3. 直接在 HTML 靜態頁面放入相同長度文字，若同樣截斷，確為前端樣式問題。

解決方案

1. 調整 CSS 允許換行與顯示完整內容

.description-box {
    /* 移除截斷相關樣式 */
    white-space: normal;       /* 允許換行 */
    word-wrap: break-word;     /* 長單字自動換行 */
    overflow: visible;         /* 不隱藏溢出 */
    /* 若需限制高度，改用 max-height + overflow: auto 提供捲軸 */
    max-height: 300px;
    overflow-y: auto;
}

2. 後端配合：提供「展開/收合」功能

若 UI 設計要求預設只顯示摘要，建議由前端 JS 控制，而非 CSS 強制截斷：

<div class="text-full" style="display:none;">完整長文本...</div>
<div class="text-summary">前 100 字...</div>
<button onclick="toggleText()">展開</button>

<script>
function toggleText() {
    document.querySelector('.text-full').style.display = 'block';
    document.querySelector('.text-summary').style.display = 'none';
}
</script>

團隊協作建議

此類問題常源於前後端需求確認不足。建議：

• 前端設計稿明確標註長文本顯示規則（全文、摘要+展開、捲軸等）。
• 後端 API 回傳完整資料，不做截斷；截斷邏輯前移至前端。
• 建立元件庫統一長文本顯示元件，避免重複造輪子。