Clip long text inside HTML table cells, show entire content on hover

Question

I have a table html table which has a column named \"address\". The address contains very long strings. What I want is I only want to show first 2 or 3 words of the address

Answer 1

.cell {
  max-width: 50px; /* tweak me please */
  white-space : nowrap;
  overflow : hidden;
}

.expand-small-on-hover:hover {
  max-width : 200px; 
  text-overflow: ellipsis;
}

.expand-maximum-on-hover:hover {
  max-width : initial; 
}

  

    

      

        ID
      
      

        Adress
      
      

        Comment
      
    
  
  

    

      

        1
      
      

        A very, very long adress that cannot be showed entirely
      
      

        A very, very long comment to add more information to the row it belongs to.
      
    
  

You might begin from there, this is an example of how to use max-width combined with overflow : hidden.

Pass hover the adress cell to see the result