How can I truncate long texts in a table using CSS?

Question

Can anyone give a CSS example of how can I create a table where long texts are truncated to texts ending with \"...\"?

Here is the example: http://jsfiddle.net/NpABe

Answer 1

Use text-overflow: ellipsis. You will need to fix the width of the cells and prevent line wrapping:

td {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

EDIT: actually this won't work. It seems you need a container div to apply the styles to:

  

    
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
(snip)


And then: 

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


EDIT 2  Ah there is a way, but only if you use table-layout: fixed:

table {
  table-layout: fixed;
  width: 100px;
}

td {
  white-space: nowrap;
  overflow: hidden;         /* <- this does seem to be required */
  text-overflow: ellipsis;
}

    

             

                                                        
            
            

              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              

                          
             
       
          
              
                                       

     查看其它4个回答


            
                         

                    



               
            

    发布评论:
    

         
                        
    
    
提交评论 
  
  

                    
                    

                    

                        

                        
                         加载中...
                        
                    
                
          
                              			
        
        
        

          

            
            

              
              

            
    


                                 
              
            
                          
    

        
         

                验证码
                

                  
                
                

                   看不清?
                
              
                                  

                    
   
                 
             
              
提交回复
            
          
        
      
       
      
    
    

          
 
     
 

        
热议问题