Modifying the SASS file to add a (space) after a comma...

Basically I am using a template grid to display a large group of objects using an image tile and text.  This is on a mobile app so I have the grid set to display 3 items per row.  Some of the text associated with the images are joined by commas where we are pulling the information from.  Example: ProductName,ProductType The app is trying to keep both words on the same line because it's unable to separate the next group of text.  So the text mentioned above is overflowing into the next column. Intended result: ProductName, ProductType My easiest solution would be to inject a space after a comma and that way it should break to a new line on it's own or I can use a number of other elements to keep it clean and neat. I've been trying to use ::after but it's not working. .form-group .control-label, .control-label {         font-weight: 600;         color: $text-dark;         ::after {             content: ', \0020';         }     }  
3 answers

Hi Andrew,

Just add this css to the text attribute.

overflow-wrap: break-word;


I tested it in a template grid and it worked well. 

No matter how small I made the screen, the text still wrapped. 


To my knowledge you should change your SCSS to this, pay attention to the ampersand:

.form-group .control-label, .control-label {
        font-weight: 600;
        color: $text-dark;
        &:after {
            content: ', \0020';

However, this is quite a hacky solution. Are the values seperate fields (as your solution suggests)? In that case, why not give them 'display: block;' to give them each a new line?

If it's one value, there's unfortunately no way to break the word on commas. I suggest you alter your data before displaying it.


What about using a change activity in the microflow?  Would that work?  Not sure what the expression would look like.


edit - Figured it out.  Thanks all for the help :)