Streaming live at 10am (PST)

Is it possible to truncate cms content?

Hi there,

Is it possible to have text entered into the CMS be truncated once it’s added to the page?

For example I have a field for the client to add in a description of their services and I want to use the first 100 characters of that field as the snippet text on the directory page of their website.

Thanks

You can use custom code and text-overflow: ellipsis which will truncate the text when it overflows a box, and place an ellipsis character after it (...)

Typical use case:

.truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

However, the good practice is to have an extra field with a specifically written teaser text, and that field in the collection will be limited to 100 characters. Better for SEO too.

8 Likes

Hi Vincent, for the uninitiated in custom code, how would i set this up? Does this go in the page settings “Before tag”? I tried googling how to set this up however the several types of code came to no avail. Anything will help, and thanks for this gem!

Its for the home page > “paragraph 2”

There are three methods for adding custom code.

  1. Site setting Custom Code tab, Head code and Footer code areas.
  2. Page settings Custom Code section, Inside tag code and Before tag code areas. they don’t have the same name than the one at page settings but they’re the same (confusing, I know)
  3. Using the Embed Component, from the Component section of the Add(+) tab, or by typing E+↵ on the Quick Find dialog (access it with ⌘+E or ⌘+K)

Only the method 3. will shows results live within the Designer. You can use an Embed component inside of the navbar symbol so the code you put there can have live effect in the designer on all pages.

All of the Custom Code areas can host any kind of code, mainly HTML, style, Javascript, SVG code… OnlyHTML doesn’t need to be wrapped in tags. The others need the be wrapped inside of their respective tags, e.g. for style code.

4 Likes

You can also use pure javascript to truncate a specific amount of characters in your text using the substring() method. Here is a quick codepen if someone is interested :slight_smile:

HTML

<p class="target">The quick brown fox jumps over the lazy dog</p>
<p class="target">The quick brown fox jumps over the lazy dog</p>
<p class="target">The quick brown fox jumps over the lazy dog</p>

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const maxCharacters = 9, // whatever max charachter you like to display
    targets = document.getElementsByClassName("target");

  Array.from(targets).forEach((target) => {
    const text = target.textContent,
      truncate = text.substring(0, maxCharacters);
    target.textContent = `${truncate}...`;
  });
});

Result

The quick...
The quick...
The quick...
2 Likes

I have a more elegant solution for you, just add this script to any page you want:

<script>
$('div.your-class').each(function(){     //you can apply it to any element, div or button or id
var truncated = $(this).text().substr(0, 100);     //Change 100 to a number of characters you want to show
$(this).text(truncated+(truncated.length<100?'':'...')); //And here as well
});
    </script>
1 Like

This is great, it works like a charm!

1 Like

This is all nice and good, it works. Thank you, psoldunov!

In my case though, the truncated/hidden text doesn’t open/reveal itself when clicking on the ellipsis “…” symbol. That function doesn’t seem to be part of this script, but I’d consider that essential as otherwise the visitor doesn’t have any way to read the rest of the text, the whole text.

How can we achieve that, when clicking on the ellipsis symbol, the rest of the text shows?

Hey Anthony,

I think I am really close…I put a selector on my text and places the code with tags in the page custom code.

What am I doing wrong? I thought the problem might be that this is a Rich Text element, but after making a new Collection Field with a simple Text Block, the truncation still wasn’t working.

I found the solution: My classes have CamelCase, and Webflow convers all classes to lower case in the back end. So the two classes did not match up: I should’ve kept both lower case.

1 Like