Wrap Column Text in Reports

Occasionally, you might come across a report that's overloaded with numerous columns. This often leads to some data, such as dates and IDs, wrapping onto the next line, which can be quite frustrating,

In this report, the Hiredate column is wrapping in the cell, making it hard for the user to read.

In just a few simple steps, you can rectify this issue and streamline your report for easier reading.

There are different ways on how you can prevent wrapping of the text. In this blog, I’ll share two options.

First Option

The first option is by using your own class:

First Step

Select the column, and under “Column Formatting”, add the name of your CSS class, in this example. I’m using cc-text-wrap

The prefix added in this CSS class (cc-) stands for “custom class”. I use this to differentiate my custom classes from the ones provided by the Oracle APEX team, to avoid naming it the same as an existing one.

Second Step

Go to the page properties, and under CSS Inline add the following:

You can also add the above CSS rule to a file, and make a reference to it at page or app level.

Result

In the above you can see how the first Hiredate column differs in styling from the second column Hiredate.

Second Option

The second option is by using a Utility Class available in Universal Theme: u-nowrap, using it the same way as mentioned above under CSS Classes attribute.

That’s all! Now your column won’t wrap even when the screen size becomes smaller. You can also enhance this approach by adding responsiveness and extra customizations to it.