docs(core/content-header): Add docs for content-header responsive behavior

docs/components/content-header/code.mdx

@@ -6,6 +6,7 @@ import PropsApi from '@site/docs/autogenerated/api/ix-content-header/api.mdx';
 
 import ContentHeaderPlayground from '@site/docs/autogenerated/playground/content-header.mdx';
 import ContentHeaderNoBackPlayground from '@site/docs/autogenerated/playground/content-header-no-back.mdx';
+import ContentHeaderTruncatePlayground from '@site/docs/autogenerated/playground/content-header-truncate.mdx';
 import ContentHeaderWithSlotPlayground from '@site/docs/autogenerated/playground/content-header-with-slot.mdx';
 
 # Content header - Code
@@ -22,4 +23,10 @@ import ContentHeaderWithSlotPlayground from '@site/docs/autogenerated/playground
 
 <ContentHeaderWithSlotPlayground />
 
+## Truncated text
+
+Titles and subtitles wrap by default when space is limited. Use the explicit truncation option when the header must retain a compact height.
+
+<ContentHeaderTruncatePlayground />
+
 <PropsApi />

docs/components/content-header/guide.md

@@ -40,19 +40,40 @@ Our content header variants makes it easier to achieve a well-balanced visual hi
 	- Elements in the header slot are top aligned by default. Use top margin to center align it with the title.
 - **Cluster action buttons**: Action buttons are automatically aligned to the right. An example for the primary content header has the back button, title and subtitle at the left top corner of the whole page, and the action buttons at the right top corner of the page.
 
+### Responsive text
+
+The title and subtitle wrap onto multiple lines by default when their available space is limited. Wrapping responds to the width of the content header rather than a specific viewport breakpoint, so the same behavior applies in pages, panes, dialogs and other constrained containers.
+
+- Title and subtitle text remain fully visible and can use as many lines as needed.
+- Long text without natural break opportunities wraps when necessary to prevent horizontal overflow.
+- Content in the header slot remains beside the title and aligned with its first line.
+- The back button and action buttons remain aligned with the first title line.
+
+Set the `textOverflow` property to `truncate` only when the header must retain a compact height. In HTML, use `text-overflow="truncate"`. In this mode, the title and subtitle each use a single line and are truncated with an ellipsis when needed. The complete values remain available as native browser tooltips.
+
+### Responsive actions
+
+Action button labels remain on one line and continue to occupy their required width. The content header does not automatically prioritize actions or move them into an overflow menu.
+
+Keep the most important actions visible. When all actions do not fit comfortably, move secondary actions into a consumer-managed overflow menu, for example using the [dropdown](../dropdown) pattern. Test the resulting composition at all supported viewport and container widths to ensure that actions do not overlap the title or subtitle.
+
 ## Dos and Don’ts
 
 <div class="dos-and-donts">
   <div class="dos">
     <ul aria-label="Recommended practices">
       <li>Do use to provide quick access to common tasks for the whole content area</li>
       <li>Do place only items in the header slot that don’t take up too much space, such as a status or a counter</li>
+      <li>Do allow titles and subtitles to wrap when the available width is limited</li>
+      <li>Do move secondary actions into an overflow menu when they compete with important header text</li>
     </ul>
   </div>
   <div class="donts">
     <ul aria-label="Practices to avoid">
       <li>Don’t use a secondary content header as a page title</li>
       <li>Don’t use more than one primary headline in one page</li>
+      <li>Don’t use truncation by default when users need the complete title or subtitle for context</li>
+      <li>Don’t allow action labels to wrap or overlap header text</li>
     </ul>
   </div>
 </div>