Breadcrumbs: Change wrapping behavior for long lines

[pooBadiger]

Describe the Issue We are using breadcrumbs feature. Our application allows 255 characters length for folder name. I could see a long space taken after a separator ( / ) for a longer name/breadcrumb item.

To Reproduce Steps to see the behavior:

1. Go to https://design.infor.com/code/ids-enterprise/latest/demo/components/breadcrumb/example-index?theme=uplift&variant=light
   and try editing the last breadcrumb item.
2. We can see the breadcrumb item moving to next line leaving a long space after the separator.

Expected behavior The long breadcrumb item should start right after the separator no matter how long the name is. And it can break into next line when it exceeds the limit (other half of the text) .

What did you try so far Played around display property on ol tag with flex , it does help but it disturbs the separator styling.

Version ids-enterprise-ng: 10.6.3

Screenshots

Platform

• Device (if applicable): N.A
• OS Version: Windows 10 or MacOS Big Sur
• Browser Name: Google Chrome or Microsoft Edge
• Browser Version: Google Chrome: Version 95.0.4638.69 (Official Build) (64-bit) Microsoft Edge: Version 95.0.1020.40 (Official build) (64-bit)

Additional Context This issue was discussed in the channel first. Please note that we have used only css styling classes like breadcrumb-list, breadcrumb in our application , not the whole component and its properties.

[tmcconechy]

Ideal this should be done with css. If thats not possible we should discuss if its worth fixing or not.

[pooBadiger]

I tried with CSS, but no luck! Let me know if you can solve this :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.