▼
Streaming live at 10am (PST)

Is it possible to truncate cms content?

Design help CMS
#1

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

Shorten (Truncate) Text Length with "..."
Blog Post with varying title length not causing my posts to not line up!
Limiting characters in a post summery
#2

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
#3

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”

#4

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.

image
image1074×478 57.9 KB

2 Likes
#5

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...
1 Like
#6

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>