当表格单元格太长时，有什么方法可以减少表格单元格中的文本？

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

你可以像这样使用line-clamp

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

这允许您通过更改-webkit-line-clamp: 3; 和works on all browsers（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

您是否尝试过使用百分比值设置字体大小 例如

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

Answer 3

一种选择是将文本包装在 td 内的 div 中，并给它一个固定的 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>