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

Solution:

• Use table-layout: fixed so that your table columns maintain fixed size
• Wrap the content inside div elements and manipulate width and overflow properties

/*
 * fixed table layout
 */
table {
  table-layout: fixed;
  width: 400px;
  font: larger monospace;
  border-collapse: collapse;
}
th:nth-child(1) {
  width: 20%;
}
th:nth-child(3) {
  width: 20%;
}
/*
 * inline-block elements expand as much as content, even more than 100% of parent
 * relative position makes z-index work
 * explicit width and nowrap makes overflow work
 */
div {
  display: inline-block;
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
/*
 * higher z-index brings element to front
 * auto width cancels the overflow
 */
div:hover {
  z-index: 1;
  width: auto;
  background-color: #FFFFCC;
}

  

    

      
Name
      
Address
      
Phone
    
  
  

    

      
John Smith
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      
1-234-567890
    
    

      
Jane Doe
      
Suspendisse lacinia, nunc sed luctus egestas, dolor enim vehicula augue.
      
1-234-567890