当表格单元格太长时，有没有办法减少表格单元格中的文本？

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，循环遍历单元格并获取每个单元格上的文本长度，然后如果长度超过特定字符使用特定大小百分比设置条件...