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”
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.
