Hi Giselle,

To just show part of the text you can use the built in Substr() function, or the TextEllipsis funtion found in the OutSystemsUIWeb module.

Hi @Giselle Chen ,

There 2 ways to accomplish this, first one is the one described by Beatriz.

The second one’s about updating the cell’s CSS using this class: 

.description-cell { 

 display: -webkit-box;              

-webkit-box-orient: vertical;       

-webkit-line-clamp: 1;           

overflow: auto;                  

max-height: 60px;       /*Add your desired height*/

white-space: nowrap;  

 }

This will force the cell to stay a fixed height and hide the overflow. 

Result:

I also attached a sample OML that you can reference.

Hi,

Please refer this documentation how-can-i-change-the-row-height-of-the-whole-table Might be it will helps you

Hi @Giselle Chen 

You can wrap the text to a certain number of words and display the full content in a tooltip if necessary. Alternatively, you can use text ellipses ("...") to indicate that the text has been truncated after a specified number of words. 

You can refer to this discussion 

https://www.outsystems.com/forums/discussion/74065/how-can-i-change-the-row-height-of-the-whole-table/

Thanks

Hi @Giselle Chen ,

You can use the below CSS in the container of the description or in the column:

white-space: normal;

width: 200px; (Change as per your need)

word-break: break-word;

Hope this helps!

Regards,

Solution: Fix cell height and cut off long text with ellipsis (…)

You can fix this using CSS.

1. Select the Description Column Cell.
2. Add CSS
3. .text-truncate {

     display: -webkit-box;

     -webkit-line-clamp: 2; /* Number of lines you want to show */

     -webkit-box-orient: vertical;

     overflow: hidden;

     text-overflow: ellipsis;

     height: 56px; /* Same fixed height for all cells */

   }

Select the Text Widget inside the Description column.

• Add Class = "text-truncate".

This will fix the height and cut the extra text after 2 lines with a ....

Regrds,

Pankaj

Hi @Giselle Chen , Instead of changing the height you can do one thing just change the data-expression css inside the td tag you just change the white-space: pre-wrap to no-wrap it will work.

In your  or  for the description column, use a class like this:

.cell-truncate {

  max-width: 200px; 

  max-height: 40px;   

  overflow: hidden;       

  text-overflow: ellipsis;

  white-space: nowrap;   

}

If you want the text to wrap into 2 lines instead of one, then remove the white-space: nowrap; and use this instead:

.cell-truncate-multiline {

  max-width: 200px;

  max-height: 40px;

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 2;   

  -webkit-box-orient: vertical;

  text-overflow: ellipsis;

}

Using this ( -webkit-line-clamp) you can decide how many number of lines you want to show in that particular cell.

Also you can change the max-width and max-height as per your requirement.

Thank you