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

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>