How to work with ellipsis in bootstrap responsive table

Question

In a responsive table text-overflow:ellipsis is not working when the data increases in the th (as the col-xs-2 width increases).

Answer 1

The text-overflow property only affects content that is overflowing a block container element in its inline progression direction MDN

For text-overflow to work, specifying text-overflow: ellipsis alone will not do any good - you should use the following styles together:

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

span, div, th, td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100px;
}

Inline element overflow ellipsis do not work
Block elements overflow ellipsis works

  
Table - Overflow test
  
This is a long text
This is a long text

---

Text Overflow in Table Layout

So text-overflow applies to block elements but td is a table-cell element - tables are always tricky to deal with because they are rendered using the default table layout algorithm. The widths of the table and its cells are adjusted to fit their content.

1. Normally specifying the usual property for getting ellipsis may work:

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

2. If they do not work or you begin to see the table algorithm do tricks on you, then you can use them along with 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;
   }

   
     
   
       
   
         
   
           
   
             
   
             Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
             
             
   Firstname
             
   Lastname
             
   Age
             
   City
             
   Country
           
         
         
   
           
   
             
   1
             
   Anna
             
   Pitt
             
   35
             
   New York
             
   USA
           
         
       
     

3. Another hack is to wrap the text in a span positioned absolute inside the td with width: 100% along with an inline-block pseudo element.

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

   
     
   
       
   
         
   
           
   
             
   
               
             Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
             
             
   Firstname
             
   Lastname
             
   Age
             
   City
             
   Country
           
         
         
   
           
   
             
   1
             
   Anna
             
   Pitt
             
   35
             
   New York
             
   USA