Overflowing Cells in Data Grids using CSS

Data grids often have cells with content that is too long to display in a column.

FlexGrid alleviates this problem in two ways:

1. It shows an ellipsis symbol next to the text to indicate there's more content in the cell.
2. It allows users to resize/auto-size columns so the content fits.

But sometimes that's not enough. A while ago we posted a blog about how to handle this the way Excel does: by allowing cells with long content to "spill" into adjacent empty cells. Read more about how to implement Excel-style overflowing cells with FlexGrid.

You can test the solution in the Overflowing Cells Fiddle.

This solution works well for grids that have many empty cells. That is often the case when you are creating spreadsheets in Excel. Unfortunately, it is typically not the case when you are dealing with grids bound to data. Those tend to have content in every cell.

Here, we suggest an alternate approach: instead of letting cells "spill" into adjacent columns, you can use some CSS to show the cell content when the mouse hovers over the cell.

For example:

In this example, most country names are too long to fit the "From" and "To" columns. But we added some CSS that shows the full cell text when the user places the mouse over a cell:

This allows the user to read the full cell content quickly and easily, without resizing the columns.

Try this sample yourself here:

FlexGrid Overflow on Hover

As you can see in the sample, we accomplished this using the CSS text-shadow property:

.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 12px;
  --overflow-color: yellow; 
}
.wj-flexgrid .wj-cells .wj-cell:hover {
  overflow: visible;
  z-index: 6;
  color: black;
  text-shadow: /* Many shadows blur out the area around the text */
    0 0 1px var(--overflow-color),
    0 0 2px var(--overflow-color),
    0 0 3px var(--overflow-color),
    0 0 4px var(--overflow-color),
    0 0 5px var(--overflow-color),
    0 0 6px var(--overflow-color),
    0 0 7px var(--overflow-color),
    0 0 8px var(--overflow-color),
    0 0 9px var(--overflow-color),
    0 0 10px var(--overflow-color)
}

We used a CSS variable to specify the background of the overflowing cells (in this case yellow). This makes it easier to repeat the background when specifying the text-shadow value. In this example, we used 10 shadows to blur the area around the text and cover up the content of the neighboring cells.

You can read more text-shadow here:

The CSS text-shadow property

That's it! No JavaScript required, only a little CSS.

This approach works for grid cells, but you can also use it for other types of content (tree nodes and tab headers).