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.
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”
https://preview.webflow.com/preview/operation-bb?utm_medium=preview_link&utm_source=dashboard&utm_content=operation-bb&preview=11148bf2a8f9cf4361f9e2cdf2862bb4&mode=preview
There are three methods for adding custom code.
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.
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 
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...
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>
This is great, it works like a charm!
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.
Yes, can anyone find a way for the end user to choose to reveal the truncated text if clicking on the ellipsis here https://kcp-one.webflow.io?
Thank you, I’ve been looking for it for eons to truncate my cms items!
Does anybody know how to truncate or split a sentence after a hashtag symbol # in text?
Hi Anthony,
Love this solution thanks for sharing.
I have a bit of a problem with the above though, that I’m sure others will encounter, in that not all of my content is over 200 characters long but some are. I have tried including a statement to handle this but I am getting a syntax error as I’m not that comfortable with arrow functions.
Would you be able to help me out? Essentially if the target is < 200 I want to exclude it from the truncation else ellipsis gets added up to 200 so I end up with a load of ellipsis.
document.addEventListener("DOMContentLoaded", () => {
const maxCharacters = 200, // whatever max charachter you like to display
targets = document.getElementsByClassName("wtlf");
Array.from(targets).forEach((target) => {
if (target < maxCharacters) {
//do nothing
}
else {
const text = target.textContent;
truncate = text.substring(0, maxCharacters);
target.textContent = `${truncate}...`;
});
});
});
Hi @Tomhirst ,
Sure, for this you’d have to execute a check before doing the truncating stuff. I’ve quicly written a function for you 
JavaScript
// 🍉 when DOM has loaded
document.addEventListener("DOMContentLoaded", () => {
const limit = 200, // number of character allowed before truncation trigger
maxCharacters = 42; // number of characher displayed after elipsis
truncateParagraphs(limit, maxCharacters);
});
// 🍆 helper function
function countCharacters(target) {
const characters = target.textContent.split("");
return characters.length; // returns the amount of characters incl. spaces
}
// 🥬 truncate function
function truncateParagraphs(limit, maxCharacters) {
const targets = document.getElementsByClassName("target");
Array.from(targets).forEach((target) => {
if (countCharacters(target) < limit) return; // skip truncation
const text = target.textContent,
elipsis = text.substring(0, maxCharacters);
target.textContent = `${elipsis}...`;
}); // end for each
}
HTML
<p class="target">The quick brown fox jumps over the lazy dog.</p>
<p class="target">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
<p class="target">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
Codepen
Feel free to have a look at the codepen here.
Thank you Anthony that’s perfect! I really appretiate you putting this together, and although it’s quite a niche use case I’m sure other will find this revived thread and new solution very helpful.
All the best,
Tom