您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

JSP/Struts2 迭代顯示資料庫資料被截斷？容器高度、CSS Overflow 完整排查

編輯：程式設計綜合問答

使用 Struts2 `` 或 JSTL `` 在 JSP 中迭代顯示資料庫記錄時，發現內容超過某個高度就不顯示，像是有固定空間限制。這通常不是後端資料截斷，而是**前端 CSS 容器高度固定、Overflow 隱藏、或表格佈局導致**。以下系統排查與解決方案。

常見原因對照表

` 被限制高度` 固定、`` 滾動的正確寫法

現象	可能原因	驗證方法	解決
列表顯示不全，底部被切掉	父容器設定 `height: 300px; overflow: hidden`	F12 檢查父層 CSS	移除固定高度或改 `overflow: auto`
表格 `
`tbody { display: block; height: 200px; overflow-y: auto }`	檢查表格相關 CSS	改用 `
資料確實完整但最後幾行不見	後端分頁邏輯錯誤，只查前 N 筆	直接在 Action/Service 打印 List size	修正 SQL `LIMIT` / 分頁參數
含大量文字的欄位被截斷	`td { white-space: nowrap; text-overflow: ellipsis; overflow: hidden }`	檢查欄位 CSS	移除截斷樣式或加 `title` 屬性提示完整內容

代碼檢查重點（你的片段）

<table align="center" bgcolor="#0066cc" width="66%">
  <tr><td align="left">考試 ... </td></tr>
  <!-- 這裡缺少 </table> 閉合標籤 -->
  <!-- 若外層有 <div style="height:xxx; overflow:hidden"> 會導致截斷 -->

HTML 結構不完整：缺少 ``、``、``、`` 會導致瀏覽器渲染異常。
內嵌 JavaScript 過長：考試計時邏輯混在 JSP 中，建議抽離至獨立 `.js` 檔案。
Struts2 標籤未正確關閉：確認 `` 有對應 ``。

最佳實踐：重構為乾淨的列表頁

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
  <title>開始答題</title>
  <style>
    .exam-container { max-width: 900px; margin: 0 auto; padding: 1rem; }
    .exam-timer { text-align: right; font-weight: bold; color: #0066cc; margin-bottom: 1rem; }
    .question-card { border: 1px solid #ddd; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; background: #fff; }
    .question-content { white-space: pre-wrap; word-break: break-word; } /* 關鍵：長文自動換行 */
    .options label { display: block; margin: 0.5rem 0; cursor: pointer; }
    .btn-submit { display: block; width: 100%; padding: 0.75rem; background: #0066cc; color: #fff; border: none; border-radius: 4px; font-size: 1.1rem; cursor: pointer; }
  </style>
</head>
<body>
  <div class="exam-container">
    <div class="exam-timer" id="timer">載入中...</div>
    <form action="submitExam" method="post" id="examForm">
      <c:forEach items="${questionList}" var="q" varStatus="vs">
        <div class="question-card">
          <h3>第 ${vs.count} 題</h3>
          <div class="question-content">${q.content}</div>
          <div class="options">
            <c:forEach items="${q.options}" var="opt">
              <label>
                <input type="radio" name="q${q.id}" value="${opt.key}"> ${opt.text}
              </label>
            </c:forEach>
          </div>
        </div>
      </c:forEach>
      <button type="submit" class="btn-submit">提交試卷</button>
    </form>
  </div>

  <script src="${pageContext.request.contextPath}/js/exam-timer.js"></script>
</body>
</html>

JS 計時器獨立檔案

// exam-timer.js
const EXAM_MINUTES = 120;
let startTime = localStorage.getItem('examStart');
if (!startTime) {
    startTime = Date.now();
    localStorage.setItem('examStart', startTime);
}

function updateTimer() {
    const elapsed = Math.floor((Date.now() - startTime) / 1000);
    const total = EXAM_MINUTES * 60;
    const remain = total - elapsed;
    if (remain <= 0) {
        alert('考試時間到！即將提交試卷');
        document.getElementById('examForm').submit();
        return;
    }
    const mm = String(Math.floor(remain / 60)).padStart(2, '0');
    const ss = String(remain % 60).padStart(2, '0');
    document.getElementById('timer').textContent = `剩餘時間：${mm}:${ss}`;
}
setInterval(updateTimer, 1000);
updateTimer();