It's any way to decrease text in a table cell when it is too long?

Question

I'm developing a calendar and I need to write events (text) in some days of the week(cell's of the table). The problem is when the text in a cell is very large and the cell increases accordingly.

I need to have fixed size cells and fixed size events (div with text). Code:

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>

Any suggestion?

Thanks for reading!

Answer 1

One option is to wrap the text in a div inside the td, and give that a fixed height along with overflow-y: auto; to make overflowing content accessible via scrolling:

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>

Please note that you cannot fixate the height of a td - its height always is a result of the content in the highest td in that row.

To decrease font-size depending upon text length, you need 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 2

have you tried to set the font-size using percentage value e.g.

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;
}

try to play around using percentage value for the font size that could help you... i am not sure if you want to use javascript, because you can use javascript, to loop through the cells and get the text length on every cell and then set condition if length exceeds certain character use specific size percentage...

Answer 3

You can use line-clamp like so

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

This allows you to limit the number of lines in the cell by changing -webkit-line-clamp: 3; and works on all browsers except IE11.

Additionally, if you add the value to the title attribute of the cell, the entire text will show when you hover it.

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>