Is there a way to wrap the text in your card label when using the Composition Decks and Cards?

[Phyllis Awkard]

I have several titles I'm using as headers for decks and cards in the Composition app. I want the headers to text wrap as appropriate and am looking for CSS code that can work.

[Chun Wye Ng -ServiceRocket-]

Hi @Phyllis Awkard

Danny from ServiceRocket here.

Thanks for raising this question, and with our Card macro supporting custom CSS stylings, I've done a few tests regarding your use-case that can be achieved via the CSS below:

.aui-tabs.horizontal-tabs .tabs-menu a {
   max-width: 300px;
   word-wrap: break-word;
   white-space: normal;
}

The CSS Classes referenced would point to all the Cards that are located inside of the horizontal Deck of Cards location. 

As for the CSS properties, 'max-width' controls the width of your Card Label, 'word-wrap: break-word' allows for long words to be broken and wrapped into the next line, while 'white-space: normal' allows for text wraps and break lines when necessary.

With this, you can create a custom CSS file (i.e. textWrap.css) attaching it to your page's attachments, while utilizing the Composition Setup macro to import its link. Thereafter, shall you have any changes in the future, you can simply update the attachment CSS file.

Macros example:

Result:

Hope this helps!

If you have any further questions regarding your our product, feel free to reach out to us via our Support Portal or Drift chat

Thanks & Best Regards,
Danny
ServiceRocket Apps Support