text-overflow: ellipsis in table-cell without width

Question

I\'m trying to achieve a responsive table width text-overflow: ellipsis; in the middle cell that looks like this:

| Button 1 | A one-lined text th

Answer 1

A cleaner way would be to simply set a max-width on the td.

Based on @Fabrício Matté's reply,

http://jsfiddle.net/V83Ae/89/

And
body { margin: 0; }

.main-table {
    width: 100%;
}

.truncate {
    text-overflow: ellipsis;
    white-space  : nowrap;
    overflow     : hidden;
    max-width    : 100px; /* Can be any size, just small enough */
}

.nowrap {
    white-space: nowrap;
}
I have no idea why this works, but it does, so if someone can figure how why applying a max-width works then please let me know as I did it by accident.

                                                        

              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              

                          
             
       
          
              
                                       

     查看其它7个回答


            

                    



               
            

    发布评论:
    

         
                        
    
    
提交评论 
  
  

                    
                    

                    

                        

                        
                         加载中...
                        
                    
                

          

            
            

              
              

            
    


                                 
              
            
                          
    

        
         

                验证码
                

                  
                
                

                   看不清?
                
              
                                  

                    
   
                 
             
              
提交回复
            
          
        

          
 
     
 

        
热议问题
            
                 


    
Button 1
    

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.
    
Button 2