How to implement breadcrumbs with long names?

Question

Design

Colleagues! tell me, plz, how to implement on the site (and on the mobile version ESPECIALLY) breadcrumbs, in case of long names of sections and subsections...
Maybe there are good examples...

Answer 1

Set the maximum width allowed for long breadcrumb items. For each resolution (mobile / desktop), you can adjust the maximum width to fit 2-3 points per line. This is already a matter of technology. This method will 100% help to avoid unpredictable stretching.

Answer 2

• Horizontal scroll
  
• Vertical placement:
  

  ↳ Home
  ↳ Wines
  ↳ White wines
  ↳ Chardonnay

  
  

Answer 3

I saw a solution in the bourgeoisie with wrapping each section of crumbs in a span with a dyne limit through css and twisting js ellipsis in the clipped part of the crumbs text.
Type:
Home > Category one.... > Subcategories... >
Product with macro.
2nd option - o5 through css we assign a class with visible: none; and instead of text, we give an icon.

Answer 4

I'm just solving a similar problem now - What is the best way to deal with breadcrumbs on mobile devices? - very long names of categories and especially products in breadcrumbs, everything is terrible on mobile.
I chose one option from the proposed ones - I'm converting it a little now -
https://codepen.io/lagudal/pen/KxGpQj
The main problem is that there is no hover in the real mobile version, or rather, it works differently than in the desktop one.
Those. if you know that you need to gently press and hold to open, and then click if necessary. The problem is that a touch, even a very gentle one, very often has an immediate click.
By the way, the problem is exactly the same when the top-level dropdown menu item itself contains a link, for example, to a category, and not just hover on it, opens nested menu levels with subcategories.
There is an idea, to fasten a class or id, which will be added only on permissions for tablets and mobile, and hang on this class or id using js events - on the first click on the element - expand the element, on the second or subsequent clicks - already follow the link.

Answer 5

As an option - use js or css to shorten the words to the width of the screen. Here is an example - sv-mebel-sochi.ru/catalog/maki
So computer - take.ms/LTpOD
So mobile version - take.ms/i8CJp