Support for RTF Truncation (Spring '22 Release)

You can now use the Show More/Show Less truncation functionality with rich text fields. Previously, truncation was not supported with rich text because we risked cutting off a closing HTML tag, which could break the page.

Upgrade Implications:

Note: This theme version includes breaking changes. Be sure to follow the upgrade implications in the breaking changes post.

:spiral_calendar: This feature is available in Early Access in English on the branch early-access-spring-22. Here’s how to use the Early Access branches of the Theme and SDK!

For the full process on adding rich text and rich text truncation to your card, follow the steps in the Rich Text unit. The following highlights the changes needed for rich text truncation if you already have rich text on your card.

In built-in theme cards that use ANSWERS.formatRichText, we have updated the showMoreDetails object to take in a new truncatedDetails property, so you will only get this property by default if you add these cards after upgrading to Theme 1.29 or later. If you want to use RTF truncation on a previously forked card or on a card you added RTF to, use truncatedDetails in place of showMoreLimit for the RTF card showMoreDetails property.

Your card will look something like:

return {
   title:, // The header text of the card
   url: profile.landingPageUrl, // If the card title is a clickable link, set URL here
   details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget) : null, // The text in the body of the card
   // If the card's details are longer than a certain character count, you can truncate the
   // text. A toggle will be supplied that can show or hide the truncated text.
   // Note: If you are using rich text for the details, you should not enable this feature.
   showMoreDetails: {
     truncatedDetails: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget, 38) : null, // Character count limit
     showMoreText: 'Show more', // Label when toggle will show truncated text
     showLessText: 'Show less' // Label when toggle will hide truncated text

The value for truncatedDetails is similar to details, but passes an additional parameter to ANSWERS.formatRichText: the character count that the rich text content will be truncated at, in this case 38. This character count will ignore all non-text characters, such as HTML tags and formatting. Any string value can be passed into truncatedDetails.

For example if you have the below card details:

The 3 hashbangs at the start and middle will be ignored, as well as the new line symbols. Truncating at 38 characters would result in the below HTML.

By default, an ellipsis is added to the end of the truncated text. This can be customized by adding one more parameter to ANSWERS.formatRichText to specify the suffix.

For example, to remove the ellipsis completely, you could specify a blank string instead:

ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget, 38, '')

Finally, showMoreLimit can still be used for truncating non rich text, but truncatedDetails must be used instead of showMoreLimit for RTF fields.

Hi Kristy!

I have an account that is on version 1.24.1, and I am using the Rich Text Formatter in the details field of the card. I am trying to truncate the Rich Text, but wanted to confirm - will I need to upgrade to theme 1.28 or higher in order to be able to truncate the Rich Text Field at all?


Correct, you need to upgrade your theme. Rich text truncation is only supported on Theme 1.29 and higher.

I actually found this formatter from another post and it worked!

details: Formatter.truncate(ANSWERS.formatRichText(profile.body), 250),

Hey Sonia,

That is a hacky workaround, so I would recommend upgrading your theme and using the above feature as a better option! If Formatter.truncate cuts off an HTML tag, it could break your site, so be careful.

Hi Kristy,

Yes - this ended up breaking the site. Luckily just on an implementation so no live site. Just upgraded the theme and all set - thanks again!