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

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