Docs(web, web-react, web-twig): Dealing with text truncate in Breadcrumb

refs #DS-960

packages/web-react/src/components/Breadcrumbs/README.md

@@ -91,4 +91,16 @@ Use the `BreadcrumbsItem` component for the ordered list as the component's chil
 | `UNSAFE_className` | `string`        | —               | ✕        | Wrapper custom class name                   |
 | `UNSAFE_style`     | `CSSProperties` | —               | ✕        | Wrapper custom style                        |
 
-For detailed information see [Breadcrumbs](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Breadcrumbs/README.md) component
+### Dealing with long titles
+
+When you need to shorten the title of the BreadcrumbsItem the preferred way is to use platform native helpers.
+There are multiple ways in JavaScript which will truncate a string for you like `.slice` or `.substring`, e.g. `str.slice(0, num) + '…'`.
+
+Additional option is to use helper class `text-truncate` with defined width.
+
+You can also use any of the existing [npm packages which deal with truncating the string][truncate-npm-search].
+
+For detailed information see [Breadcrumbs][breadcrumbs] component.
+
+[truncate-npm-search]: https://www.npmjs.com/search?q=truncate
+[breadcrumbs]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Breadcrumbs/README.md

packages/web-twig/src/Resources/components/Breadcrumbs/README.md

@@ -135,5 +135,18 @@ You can add `id`, `data-*` or `aria-*` attributes to further extend the componen
 descriptiveness and accessibility. Also, UNSAFE styling props are available,
 see the [Escape hatches][escape-hatches] section in README to learn how and when to use them.
 
+### Dealing with long titles
+
+When you need to shorten the title of the BreadcrumbsItem the preferred way is to use platform native helpers.
+Twig has an implementation of text truncating using [`u` filter][twig-truncate].
+Please see the documentation for more details.
+
+```twig
+{{ 'Lorem ipsum'|u.truncate(8, '…') }}
+```
+
+Additional option is to use helper class `text-truncate` with defined width.
+
 [breadcrumbs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Breadcrumbs
 [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
+[twig-truncate]: https://twig.symfony.com/doc/3.x/filters/u.html

packages/web/src/scss/components/Breadcrumbs/README.md

@@ -1,35 +1,56 @@
 # Breadcrumbs
 
+Shows where the user is within the app hierarchy.
+
+## Usage
+
 ```html
 <nav aria-label="Breadcrumb" class="Breadcrumbs">
   <ol>
     <li class="d-none d-tablet-flex">
       <a href="#rootUrl" class="link-primary link-underlined">Root</a>
+      <svg width="24" height="24">
+        <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
+      </svg>
     </li>
     <li class="d-none d-tablet-flex">
-      <svg class="Icon" width="24" height="24">
+      <a href="#categoryUrl" class="link-primary link-underlined">Category</a>
+      <svg width="24" height="24">
         <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
       </svg>
-      <a href="#categoryUrl" class="link-primary link-underlined">Category</a>
     </li>
     <li class="d-tablet-none">
-      <svg class="Icon" width="24" height="24">
+      <svg width="24" height="24">
         <use xlink:href="/icons/svg/sprite.svg#chevron-left" />
       </svg>
       <a href="#subcategoryUrl" class="link-primary link-underlined">Back</a>
     </li>
     <li class="d-none d-tablet-flex">
-      <svg class="Icon" width="24" height="24">
+      <a href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
+      <svg width="24" height="24">
         <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
       </svg>
-      <a href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
     </li>
     <li class="d-none d-tablet-flex">
-      <svg class="Icon" width="24" height="24">
-        <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
-      </svg>
       <a href="#currentUrl" aria-current="page" class="link-secondary">Current page</a>
     </li>
   </ol>
 </nav>
 ```
+
+### Dealing with long titles
+
+When you need to shorten the title of the Breadcrumbs item you can use a helper class `text-truncate` with defined width.
+
+```html
+<!-- … --->
+<li class="d-none d-tablet-flex">
+  <a href="#currentUrl" aria-current="page" class="link-secondary text-truncate" style="max-width: 100px;">
+    This is a very long title of the current page
+  </a>
+  <svg width="24" height="24">
+    <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
+  </svg>
+</li>
+<!-- … --->
+```