web-dev-qa-db-fra.com

Comment travailler avec Ellipsis dans un tableau réactif bootstrap

Dans une table sensible, text-overflow:Ellipsis ne fonctionne pas lorsque les données augmentent dans la variable th (à mesure que la largeur de col-xs-2 augmente). 

 enter image description here

Code ci-dessous:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th class="col-xs-2" style="text-overflow: Ellipsis;">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</th>
        <th class="col-xs-1">Firstname</th>
        <th class="col-xs-1"> Lastname</th>
        <th class="col-xs-4">Age</th>
        <th class="col-xs-2">City</th>
        <th class="col-xs-2">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
</div>

htmlcsstwitter-bootstraptwitter-bootstrap-3css-position
14
sibaspage

La propriété text-overflow affecte uniquement le contenu qui déborde d'un fichier bloquer l’élément conteneur dans sa direction de progression en ligne MDN

Pour que text-overflow fonctionne, spécifier text-overflow: Ellipsis seul ne sert à rien - vous devez utiliser les styles suivants ensemble:

overflow: hidden;
white-space: nowrap;
text-overflow: Ellipsis;


span, div, th, td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: Ellipsis;
  max-width: 100px;
}
<span>Inline element overflow Ellipsis do not work</span>
<div>Block elements overflow Ellipsis works</div>
<table>
  <tr><th>Table - Overflow test</th></tr>
  <tr><td>This is a long text</td><td>This is a long text</td></tr>
</table>
Débordement de texte dans la présentation de tableau

Donc text-overflow s'applique aux éléments block mais td est un élément table-cell - les tables sont toujours compliquées à traiter car elles sont rendues à l'aide de algorithme de présentation de table par défaut. Les largeurs de la table et de ses cellules sont ajustées pour correspondre à leur contenu.

  1. Spécifier normalement la propriété habituelle pour obtenir Ellipsis peut fonctionner:

    overflow: hidden;
white-space: nowrap;
text-overflow: Ellipsis;

  2. S'ils ne fonctionnent pas ou si vous commencez à voir les algorithmes de table vous manipuler, vous pouvez les utiliser avec max-width: 0

    overflow: hidden;
white-space: nowrap;
text-overflow: Ellipsis;
max-width: 0;


    .table .text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: Ellipsis;
  max-width: 0;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th class="col-xs-2 text">
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          </th>
          <th class="col-xs-1">Firstname</th>
          <th class="col-xs-1">Lastname</th>
          <th class="col-xs-4">Age</th>
          <th class="col-xs-2">City</th>
          <th class="col-xs-2">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
        </tr>
      </tbody>
    </table>
  </div>

  3. Un autre hack consiste à envelopper le texte dans une span positionnée absolute dans la td avec width: 100% avec un inline-blockpseudo-élément.

    .table .text {
  position: relative;
}

.table .text span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: Ellipsis;
  position: absolute;
  width: 100%;
}

.text:before {
  content: '';
  display: inline-block;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th class="col-xs-2 text">
            <span>
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</span>
          </th>
          <th class="col-xs-1">Firstname</th>
          <th class="col-xs-1">Lastname</th>
          <th class="col-xs-4">Age</th>
          <th class="col-xs-2">City</th>
          <th class="col-xs-2">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
        </tr>
      </tbody>
    </table>
  </div>

26
kukkuz

A partir de Bootstrap 4, vous pouvez effectuer les opérations suivantes en utilisant la classe .text-truncate.

<th class="col-xs-2 d-inline-block text-truncate" style="max-width: 150px;">

https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

10
yeahlad

Une autre suggestion pour bootstrap 4:

https://Gist.github.com/marcoskubis/4bf343928703824d85d0ec1b301f3a63

.table.table-Ellipsis tbody td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: Ellipsis;
    white-space: nowrap
}
0
Tom John