docs: add no truncation information on breadcrumb (#3270)

Author: MaxLardenois

site/src/content/docs/components/breadcrumb.mdx

@@ -60,10 +60,12 @@ Use an ordered or unordered list with linked list items to create a minimally st
 
 ## Layout
 
+### Breakpoints behavior
+
 Breadcrumb will never wrap, the number of displayed items depends on the available width, the final two items will always be shown.
 
 <Callout type="danger">
-**Breadcrumb items should not be this long**, the following examples are for small viewport demonstration purpose only
+  **Breadcrumb items should not be this long**, the following examples are for small viewport demonstration purpose only.
 </Callout>
 
 <Example code={`<nav aria-label="large breadcrumb">
@@ -83,3 +85,21 @@ Breadcrumb will never wrap, the number of displayed items depends on the availab
       <li class="breadcrumb-item active" aria-current="page"><span title="Very long page to show off responsiveness behavior">Very long page to show off responsiveness behavior</span></li>
     </ol>
   </nav>`} />
+
+### Avoiding truncation
+
+To prevent a specific item from being truncated, add `.flex-shrink-0` on the `<li>`, this could be useful for brand names like Orange which should never be truncated. The penultimate item has this option set by default so it's not useful to add it.  The items will still be hidden on smaller screens.
+
+<Callout type="danger">
+  Be aware that adding this utility to all items would result in an overflow.
+</Callout>
+
+<Example code={`<nav aria-label="very large breadcrumb with no truncation on some items">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item flex-shrink-0"><a href="#" title="Home">Home</a></li>
+      <li class="breadcrumb-item flex-shrink-0"><a href="#" title="Very long subcategory to test responsive">Very long subcategory to test responsive</a></li>
+      <li class="breadcrumb-item"><a href="#" title="Very long subcategory to test responsive 1">Very long subcategory to test responsive 1</a></li>
+      <li class="breadcrumb-item"><a href="#" title="Very long subcategory to test responsive A">Very long subcategory to test responsive A</a></li>
+      <li class="breadcrumb-item active" aria-current="page"><span title="Very long page to show off responsiveness behavior">Very long page to show off responsiveness behavior</span></li>
+    </ol>
+  </nav>`} />