How can I truncate breadcrumb items if too long?

Hey @matsp,

Thanks for reaching out!

Unfortunately, we don’t have an option to truncate the breadcrumb items.

However, you can modify and use the filter in this guide to achieve the desired output –

https://aioseo.com/docs/aioseo_breadcrumbs_trail/

Please feel free to let me know if you have any questions.

Thanks!

Hey @prabhatrai thanks for your response ??

Unfortunately I have no idea how to edit that. I’m not looking to remove an individual item, just shorten the text of every item. I read it’s possible with css but I haven’t sorted it yet. I’m competent with html and css, and implementing javascript but not rewriting php.

Hey @matsp,

Although ellipses can be implemented with CSS, it might not be possible to apply them after the desired number of characters. This is where you’ll need to use PHP or JavaScript.

The character length of each breadcrumb element can be calculated, and the ellipses can then be appended to the filter code I shared. However, as you correctly mentioned, this can also be implemented using JavaScript.

Sure, you can write a Javascript code that first calculates the length of the breadcrumb elements after selecting them and then replace all the characters after the 20th character with ellipses to get the desired output.

Please let me know if you have any other questions.

Thanks!

Hey @prabhatrai thanks! I’ve found a snippet that looks easy for me to implement, I just need to add a class “truncate” to the breadcrumb items. Is there a template file I can do this in that you can point me to please? Or any way of adding the class?

The code I want to try:
https://codepen.io/Nohinn/pen/ezpbWa

Hey @matsp,

Here’s our Breadcrumbs template filter that you can modify and use to get the desired output –

https://aioseo.com/docs/aioseo_breadcrumbs_template/

Please let me know if you have any questions.

Thanks!