Dev Faq
0
votes

Est-il possible de réduire le texte d'une cellule de tableau quand il est trop long?

Je développe un calendrier et j'ai besoin d'écrire des événements (texte) certains jours de la semaine (cellules du tableau). Le problème est lorsque le texte d'une cellule est très volumineux et que la cellule augmente en conséquence.

J'ai besoin de cellules de taille fixe et d'événements de taille fixe (div avec texte). entrez la description de l'image ici Code: 

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

Une suggestion?

Merci d'avoir lu!

4 commentaires

Voulez-vous réduire le texte ou voulez-vous le couper?

J'ai besoin de rendre le texte plus petit (en fonction de sa longueur) et d'avoir des cellules avec une taille fixe. @connexo

Vous ne pouvez pas fixer la hauteur de la cellule, voir ma réponse ci-dessous. Pour réduire la taille de la police en fonction de la longueur du contenu, vous devrez recourir à Javascript.

Avez-vous essayé de définir font-size dans vw ?

3 Réponses :

0
votes

Une option consiste à envelopper le texte dans un div à l'intérieur du td , et à lui donner une hauteur fixe avec un dépassement de -y: auto; pour rendre accessible le contenu débordant via le défilement: 

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

Veuillez noter que vous ne pouvez pas fixer la hauteur d'un td - sa hauteur est toujours le résultat du contenu dans le td le plus élevé de cette ligne.

Pour réduire la taille de la police en fonction de la longueur du texte, vous avez besoin de 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 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>
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;
}

2 commentaires

Avec cet exemple est créé un texte de type scroll, mais je n'en ai pas besoin. J'ai besoin de diminuer la taille du texte (en fonction de sa longueur) et d'obtenir un div fixe "schedule_event" pour en insérer plus d'un. Une idée? @connexo

@ adriano009 Ajout d'un exemple qui ajuste la taille de la police. L'exemple suppose que vous voulez 100% de la taille de police d'origine pour les éléments qui ont jusqu'à 35 caractères.

2
votes

Vous pouvez utiliser line-clamp a> like so 

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

Ceci vous permet de limiter le nombre de lignes dans la cellule en changeant -webkit-line-clamp: 3; et fonctionne sur tous les navigateurs sauf IE11.

De plus, si vous ajoutez la valeur à l'attribut title de la cellule, tout le texte s'affichera lorsque vous le survolerez. 

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;
}
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

2 commentaires

Ce n'est pas valide, cet exemple ne masque le texte que lorsque la taille est supérieure à un nombre. J'utiliserai JS pour cela. Merci pour la réponse @volt

@ Adriano009 Comme je l'ai mentionné, vous pouvez contrôler le nombre maximum de lignes souhaitées avec -webkit-line-clamp: Donc, si vous voulez seulement une ligne, changez-le sur -WebKit-Line- CLAMP: 1 Si vous voulez deux lignes, changez-le sur -WebKit-Line-Line-Clamp: 2 et ainsi de suite.

0
votes

avez-vous essayé de définir la taille de la police en utilisant une valeur en pourcentage Par exemple, 

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

essayez de jouer avec la valeur en pourcentage de la taille de police qui pourrait vous aider ... Je ne sais pas si vous souhaitez utiliser javascript, car vous pouvez utiliser javascript, pour parcourir les cellules et obtenir la longueur du texte sur chaque cellule, puis définir la condition si la longueur dépasse certains caractères, utilisez un pourcentage de taille spécifique ...

1 commentaires

Oui, cette valeur en pourcentage aide mais ne résout pas le problème. Merci pour votre réponse! @Kai

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier