當表格單元格太長時，有沒有辦法減少表格單元格中的文本？

Question

我正在開發一個日歷，我需要在一周的某些天（表格的單元格）編寫事件（文本）。 問題是當單元格中的文本非常大並且單元格相應增加時。

我需要固定大小的單元格和固定大小的事件（帶有文本的 div）。 代碼：

 table { font-size: 0.875rem; font-weight: 400; line-height: 1.5; direction: ltr; text-align: center !important; color: #6c757d !important; box-sizing: border-box; border-collapse: collapse; width: 100%; margin-bottom: 1rem; background-color: transparent; border: 1px solid #dee2e6; table-layout: fixed; } .timetable_event { width: 100%; line-height: normal; }

 <table class="table table-bordered table-responsive-sm" id="calendar"> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody id="calendar-body"> <tr> <td></td> <td></td> <td></td> <td>1 <div class="timetable_event"> <small>Subject: [00000111] AUDICION Y LENGUAJE / LOGOPEDIA</small> <br> <small>From: 02:00</small> <br> <small>To: 05:33</small> <br> </div> </td> <!--more code --> </tbody> </table>

有什么建議嗎？

謝謝閱讀！

Answer 1

你可以像這樣使用線夾

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

這允許您通過更改-webkit-line-clamp: 3;來限制單元格中的行數-webkit-line-clamp: 3; 並適用於除 IE11 之外的所有瀏覽器。

此外，如果您將值添加到單元格的title屬性，則將其懸停時將顯示整個文本。

 table { font-size: 0.875rem; font-weight: 400; line-height: 1.5; direction: ltr; text-align: center !important; color: #6c757d !important; box-sizing: border-box; border-collapse: collapse; width: 100%; margin-bottom: 1rem; background-color: transparent; border: 1px solid #dee2e6; table-layout: fixed; } .timetable_event { width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

 <table class="table table-bordered table-responsive-sm" id="calendar"> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody id="calendar-body"> <tr> <td></td> <td></td> <td></td> <td>1 <div class="timetable_event" title="Subject: [00000111] AUDICION Y LENGUAJE / LOGOPEDIA From: 02:00 To: 05:33"> <small>Subject: [00000111] AUDICION Y LENGUAJE / LOGOPEDIA</small> <br> <small>From: 02:00</small> <br> <small>To: 05:33</small> <br> </div> </td> <!--more code --> </tbody> </table>

Answer 2

一種選擇是包裹在一個文本div里面td ，並給予一個固定的height以及overflow-y: auto; 通過滾動訪問溢出的內容：

 table { font-size: 0.875rem; font-weight: 400; line-height: 1.5; direction: ltr; text-align: center !important; color: #6c757d !important; box-sizing: border-box; border-collapse: collapse; width: 100%; margin-bottom: 1rem; background-color: transparent; border: 1px solid #dee2e6; table-layout: fixed; } .timetable_event { width: 100%; line-height: normal; max-height: 2rem; overflow-y: scroll; }

 <table class="table table-bordered table-responsive-sm" id="calendar"> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody id="calendar-body"> <tr> <td></td> <td></td> <td></td> <td>1 <div class="timetable_event"> <small>Subject: [00000111] AUDICION Y LENGUAJE / LOGOPEDIA</small> <br> <small>From: 02:00</small> <br> <small>To: 05:33</small> <br> </div> </td> </tr> </tbody> </table>

請注意，您無法固定td的高度 - 它的高度始終是該行中最高td內容的結果。

要根據文本長度減小字體大小，您需要使用 Javascript：

 document.addEventListener('DOMContentLoaded', function() { const events = document.querySelectorAll('.timetable_event'); for (event of events) { const factor = 1 / ((event.innerText.length || 1) / 35); if (factor < 1) event.style.fontSize = (factor * 0.875) + 'rem'; } })

 table { font-size: 0.875rem; font-weight: 400; line-height: 1.5; direction: ltr; text-align: center !important; color: #6c757d !important; box-sizing: border-box; border-collapse: collapse; width: 100%; margin-bottom: 1rem; background-color: transparent; border: 1px solid #dee2e6; table-layout: fixed; } .timetable_event { width: 100%; line-height: normal; max-height: 2rem; overflow: hidden; }

 <table class="table table-bordered table-responsive-sm" id="calendar"> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody id="calendar-body"> <tr> <td></td> <td>1 <div class="timetable_event"> <small>Subject: ABC</small> <br> <small>From: 02:00</small> <br> <small>To: 05:33</small> <br> </div> </td> <td></td> <td>2 <div class="timetable_event"> <small>Subject: [00000111] AUDICION Y LENGUAJE / LOGOPEDIA</small> <br> <small>From: 02:00</small> <br> <small>To: 05:33</small> <br> </div> </td> </tr> </tbody> </table>

Answer 3

您是否嘗試使用百分比值設置字體大小，例如

table {
  font-size: 100%; /*or 80% */
  font-weight: 400;
  line-height: 1.5;
  direction: ltr;
  text-align: center !important;
  color: #6c757d !important;
  box-sizing: border-box;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1rem;
  background-color: transparent;
  border: 1px solid #dee2e6;
  table-layout: fixed;
}

嘗試使用可以幫助您的字體大小的百分比值...我不確定您是否要使用 javascript，因為您可以使用 javascript，循環遍歷單元格並獲取每個單元格上的文本長度，然后如果長度超過特定字符使用特定大小百分比設置條件...