wake-up-neo.com

So arbeiten Sie mit Ellipsis in der Bootstrap-Responsive-Tabelle

In einer responsive Tabelle funktioniert text-overflow:Ellipsis nicht, wenn die Daten in der th zunehmen (wenn die col-xs-2-Breite zunimmt). 

 enter image description here

Code unten:

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

14
sibaspage

Die Eigenschaft Textüberlauf wirkt sich nur auf Inhalte aus, die eine .__ überlaufen. Blockcontainerelement in seiner Inline-Progressionsrichtung MDN

Für text-overflow funktioniert die Angabe von text-overflow: Ellipsis alleine nicht - Sie sollten die folgenden Stile zusammen verwenden:

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>

Textüberlauf im Tabellenlayout

text-overflow gilt also für block-Elemente, aber td ist ein table-cell-Element - Tabellen sind immer knifflig zu behandeln, da sie mit dem Standard-Tabellenlayout-Algorithmus gerendert werden. Die Breite der Tabelle und ihrer Zellen wird an ihren Inhalt angepasst.

  1. Normalerweise funktioniert das Festlegen der üblichen Eigenschaft zum Abrufen von Ellipsis:

    overflow: hidden;
    white-space: nowrap;
    text-overflow: Ellipsis;
    
  2. Wenn sie nicht funktionieren oder Sie anfangen, die Tabellenalgorithmus Tricks bei Ihnen zu sehen, können Sie sie zusammen mit max-width: 0 verwenden.

    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. Ein weiteres hack besteht darin, den Text in eine span zu packen, die absolute innerhalb der td mit width: 100% zusammen mit einem inline-blockPseudo-Element in der Variablen __ platziert ist.

    .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

Ab Bootstrap 4 können Sie mit der Klasse .text-truncate Folgendes tun.

<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

Mit Bootstrap 4 können Sie das .text-truncate Klasse. Diese Stile werden automatisch für die relevanten Komponenten hinzugefügt.

.text-truncate{
    overflow: hidden;
    text-overflow: Ellipsis;
    white-space: nowrap;
}

dann können Sie die maximale Breite für das Element festlegen, um eine zuverlässigere Ausgabe zu erhalten.

2
Lasantha

Ein weiterer Vorschlag für 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