Line-Break/Text-Break for Columns? Studio Pro?

Hey everybody,  I would like to show a table within my Data Grid for Soft skills.  Some discriptions are very long, so I would like to break the line,  so the description gets a second or third line. I found the term text-break, but it does not seem to work for columns. :/ Any advice please? :)    It works for the headline, but not the columns.    Thanks already in advance.    Kind regards Patrick           
3 answers
white-space: break-spaces;

This is the CSS property you will need here. But adding it on column from the studio pro will not work. You will need custom CSS class that targets the HTML element where this text is placed i.e., a wrapper div inside the column
Use browser’s inspect element tool and you will find that the HTML element containing your soft skills text is accessed by

.mx-datagrid table tbody tr td .mx-datagrid-data-wrapper

A better approach would be to create a custom class like “columnBreakSpaces”. Give this class to all columns you want to break the text in the studio pro where you were trying “text-break”
Now add the custom CSS

.mx-datagrid table tbody tr td.columnBreakSpaces .mx-datagrid-data-wrapper {
    white-space: break-spaces;



Dear Umar, 

thanks already for your explanation. 

I tried to follow your advice for the customeClass, but it does not seem to work. 

I guess just entering the information in Style was not correct? 

Can you give me a short description, where I can add a class. To be honest I couldn´t find it myself. 🤔😇

Thanks again already for your help


If you have not used custom CSS before, then you will need to follow some tutorials and get hands-on with it

Please see below documentation link and a forum post regarding how to add CSS or SASS (having more features) in Mendix.

SASS is recommended but you need to setup calypso once to be able to compile it. CSS is easier to setup and use. You will find hint on both in above links