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.

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

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.

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.

Go ahead, share...

Facebook

Twitter

Linkedin

Google

Tumblr

Buffer

Stumbleupon

Email