How to shorten breadcrumbs?

Question

User navigation

Greetings.
I use the Breadcrumb NavXT plugin. Navigation texts are added to the rubric pages. The title of the rubric is displayed in h1. The problem is that h1s are long and don't look good in breadcrumbs (%htitle%), especially when there is a nested heading structure.
Can you tell me how to make it so that only part of the text in the structure is displayed? Let's say only the first 20-30 characters from the category name and at the end ...

Answer 1

Or maybe you can set a separate name for displaying it in breadcrumbs?

Answer 2

a somewhat long question, if you need to stupidly reduce the length, then you can simply solve everything with ccs.
I recently had a task, a little more difficult, to make different behavior for different screens. For large ones - full output, for medium ones - collapse and deploy by hover, for touch - where there is no hover - by clicking. In my case, you can’t do without js,
it turned out like this - https://codepen.io/lagudal/pen/oaqdMK
(excluding screens, only for mobs)
This is how it was on pure css, if you don’t need hover deployment, just remove styles for hover.
https://codepen.io/lagudal/pen/LgZzbO
Of course, it may be a little different for you, but the principle is the same ... well, you don’t show how it is with you, but it’s not interesting to look for yourself to see how what and how the WordPress plugin displays.