Long Text Strategies

When dealing with long text entries in a report, sometimes it’s necessary to reduce or simplify the amount of data being displayed.

In this first report we see how the Summary column would be displayed straight from the database. We can add CSS like this to constrain the width of the column:

td[headers="SUMMARY"] {width: 500px;}

Where SUMMARY matches the name of the column.

Full Text with CSS width restriction
Full Text with CSS width restriction

In the next example, we’ll use a decode to truncate the long text to the first 50 characters.

, decode(sign(length(summary)-50)
  , null, null
  , -1, summary
  , substr(summary,1,50) ||'…') summary

The decode will check if the length of the SUMMARY column is greater than 50 by using the SIGN function. If the length – 50 is null, then we have a null summary. If the length – 50 is a negative value, then we have less than 50 characters to display and we can show the full summary column. However, if the value is positive, that means the summary is more than 50 characters long and we will substr just the first 50 and add an ellipsis character (…). Of course, you could use anything you want and you can use any appropriate length by changing the 50 in two places.

If your text column was a CLOB instead of VARCHAR2, you would need to use the DBMS_LOB package.

, decode(sign(dbms_lob.getlength(summary)-50)
  , -1, summary
  , substr(dbms_lob.summary,1,50) ||'…') summary

Long Text w/Ellipsis

Now, for a pure CSS alternative, you can use this CSS code:

td[headers="SUMMARY"] {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100px;
  white-space: nowrap;
}

Thanks to Roel Hartman for this CSS suggestion.

In this next example, we’ll use the ability of the Column Link functionality to display an image/icon that will show the full text (or partial text if you want) on hover.
Long-Column-Link

The Link Attribute will use the “title” property of a link in order to display the full summary on hover. The Target should be set to “URL” and the URL to “#0”. The zero is because zero is not a valid ID and that way when you click on the image the page won’t jump.

Try it out and hover on the images under the Summary column.

Long Text w/Icon

Hi, I'm Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc... I'm an APEX Tech Lead DRW. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.

7 Comments on “Long Text Strategies

  1. Great post.. very informative! By the way.. have you ever heard of this sweet application called “AutoReg?”

    • Hi Alice, the very first part of the blog addresses this solution.
      It shows this code:

      , decode(sign(length(summary)-50)
      , null, null
      , -1, summary
      , substr(summary,1,50) ||'…') summary

I love comments, write me a line