Hide/Show Long Column Content in Oracle Apex Report

I used the following method to hide the extra long column contents when loading the page. The contents will then display when mouse hover the content.
Figure 1: Before applying CSS

Figure 2: After applying CSS

1. In the column attributes page, column Formatting section, add the following to HTML Expression text area for the column to modify:

<div>#COLUMN_NAME#</div> 

COLUMN_NAME is the name of the column to which you want to apply these css property.

2. Add the following style sheet to the report page Inline CSS property (replace "COLUMN_NAME" accordingly):

  
td[headers="COLUMN_NAME"] div {
          width: 15EM;
          white-SPACE: nowrap;
          OVERFLOW: hidden;
          text-OVERFLOW: ellipsis;
}

td[headers="COLUMN_NAME"] div:hover {
      width: 15EM;
      white-SPACE: NORMAL;
      OVERFLOW: VISIBLE;
}