Hi people,
Now I was designing for an edge case and want to limit the characters for the blog title. The default field “Name” type: Plaintext has no option of “Minimum character count” and “Maximum character count”. So If someone types in an insanely long Blog title, the whole UI will break.
I don’t know if I’m missing something obvious. Looking for help…
You can’t. It’s not an option. Train your users.
[Edit] - I was referring to data entry limitations. Webflow has since added min-max attributes to the text field which fixes this issue. On the front end there are solutions as others pointed out.
@webdev I mean there should be an option if it can be done for custom fields. I think of using some custom JS to limit the characters on the front-end and append “…” at the end of each title if the characters are greater than a certain number.
You can hide the overflow and use the text-overflow CSS property to add ellipsis for text that extends beyond the container size.
With the setup above, your custom code would look something like what I have below:
<style>
.your-class {
text-overflow: ellipsis;
}
</style>
Without knowing your design I can’t say for sure what else you’d need to change, but that should point you in the right direction.
@mikeyevin Thanks for the reply. I will try your suggestion too. Looks simpler. But meanwhile, I came up with this solution
Thanks to my brief coding background and Stackoverflow. Came up with this code. Checks the length of the dynamic textelement. If the length exceeds the limit, it trims the extra chars and adds “…” to the end.
#wrapper is the id of the wrapper you need to enclose the textelement in. #textelement is the id of the textelement
$(function () {
$("#wrapper #textelement").each(function (i) {
var limit=70;//replace the character limit you want
var check = false;
if (st.includes(" ", limit-1)) {
check = true;
}
if (len > limit && !check) {
$(this).text($(this).text().substr(0, limit) + '....');
//console.log("this");
}
else if (len > limit) {
$(this).text($(this).text().substr(0, limit-1) + '....');
//console.log("that");
}
});
});
The result
Thank you for sharing this, I was having the same issue and I believe you have provided a solution for many of us.
Can you please shortly explain where should I implement the custom code mentioned above?
Also, do I need to modify the element’s ID?
Hi. I feel happy that I was of some help to you. Means a lot
Yes you need to change the elements id. Just make a div and set the id to “#wrapper”, inside this div you can use any text elements like Heading, Paragraph, Text Block etc with the id to “textelement”. Just place the code in the custom code section. And remember to use tags. i.e place the above code inside these tags.
For some reason above scrip didn’t work for me on a collection element (only 1 item worked). If someone has the same problem here’s updated scrip and it’s targeting class name instead of ID.
<script>
$(function () {
$(".textelement").each(function (i) {
var limit = 70; // replace the character limit you want
var text = $(this).text();
var len = text.length;
var check = false;
if (text.includes(" ", limit - 1)) {
check = true;
}
if (len > limit && !check) {
$(this).text(text.substr(0, limit) + '.... Learn More.');
} else if (len > limit) {
$(this).text(text.substr(0, limit - 1) + '.... Learn More.');
}
});
});
</script>
And if you’d like to add limit based on words not characters, here’s another version:
<script>
$(function () {
$(".textelement").each(function (i) { // Changed to class selector
var limit = 30; // replace the word limit you want
var text = $(this).text();
var words = text.split(/\s+/); // Split text into words
var len = words.length;
var check = false;
if (len > limit) {
check = true;
}
if (check) {
$(this).text(words.slice(0, limit).join(' ') + '....');
}
});
});
</script>
For anyone who hasn’t tried it, CSS line-clamping is often an ideal solution here.
It’s CSS-based, and it ensures that you get the maximum amount of content, but limited to e.g. 3 lines. Perfect for managing long CMS text in a layout.
It’s also part of SA5 attributes;
You can set those values of CSS to limit text into line lines and ellipses, Overvloe has by default option and white-space and text-overflow use
Custom Property:
.one-line-paragraph {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}