Есть ли способ уменьшить текст в ячейке таблицы, когда он слишком длинный? - PullRequest
Новая
       2

Есть ли способ уменьшить текст в ячейке таблицы, когда он слишком длинный?

0 голосов
/ 15 января 2020

Я разрабатываю календарь, и мне нужно писать события (текст) в некоторые дни недели (ячейки таблицы). Проблема в том, что текст в ячейке очень большой и ячейка соответственно увеличивается.

Мне нужно иметь ячейки фиксированного размера и события фиксированного размера (div с текстом). enter image description here Код: 

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>

Любое предложение?

Спасибо за чтение!

Ответы [ 3 ]

2 голосов
/ 15 января 2020

Вы можете использовать line-зажим примерно так 

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

Это позволяет вам ограничить количество строк в ячейке путем изменения -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>
0 голосов
/ 15 января 2020

пытались ли вы установить размер шрифта, используя процентное значение, например, 

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, чтобы l oop через ячейки и получить длину текста в каждой ячейке, а затем установить условие, если длина превышает определенный символ, указать c размер в процентах ...

0 голосов
/ 15 января 2020

Один из вариантов - заключить текст в 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>
...