Create new EuiTextBlockTruncate component

src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx

@@ -20,7 +20,10 @@ import {
 } from '../../../../src/components';
 
 import { LanguageSelector, ThemeContext } from '../with_theme';
-import { GuideSection } from '../guide_section/guide_section';
+import {
+  GuideSection,
+  GuideSectionProps,
+} from '../guide_section/guide_section';
 
 export type GuideTabbedPageProps = PropsWithChildren &
   CommonProps & {
@@ -126,11 +129,20 @@ export const GuideTabbedPage: FunctionComponent<GuideTabbedPageProps> = ({
           />
         );
       } else {
-        const PageComponent = page.page;
+        let rendered: ReactNode;
+
+        if (page.page) {
+          const PageComponent = page.page;
+          rendered = <PageComponent showSass={showSass} />;
+        } else {
+          rendered = page.sections.map((sectionProps: GuideSectionProps) => (
+            <GuideSection {...sectionProps} />
+          ));
+        }
 
         return (
           <Route key={pathname} path={`${match.path}/${id}`}>
-            <PageComponent showSass={showSass} />
+            {rendered}
           </Route>
         );
       }

src-docs/src/routes.js

@@ -650,31 +650,33 @@ const navigation = [
   {
     name: 'Utilities',
     items: [
-      AccessibilityExample,
-      AutoSizerExample,
-      BeaconExample,
-      ColorPaletteExample,
-      CopyExample,
-      UtilityClassesExample,
-      DelayRenderExample,
-      ErrorBoundaryExample,
-      FocusTrapExample,
-      HighlightAndMarkExample,
-      HtmlIdGeneratorExample,
-      InnerTextExample,
-      I18nExample,
-      MutationObserverExample,
-      OutsideClickDetectorExample,
-      OverlayMaskExample,
-      PortalExample,
-      PrettyDurationExample,
-      ProviderExample,
-      ResizeObserverExample,
-      ScrollExample,
-      TextDiffExample,
-      TextTruncateExample,
-      WindowEventExample,
-    ].map((example) => createExample(example)),
+      ...[
+        AccessibilityExample,
+        AutoSizerExample,
+        BeaconExample,
+        ColorPaletteExample,
+        CopyExample,
+        UtilityClassesExample,
+        DelayRenderExample,
+        ErrorBoundaryExample,
+        FocusTrapExample,
+        HighlightAndMarkExample,
+        HtmlIdGeneratorExample,
+        InnerTextExample,
+        I18nExample,
+        MutationObserverExample,
+        OutsideClickDetectorExample,
+        OverlayMaskExample,
+        PortalExample,
+        PrettyDurationExample,
+        ProviderExample,
+        ResizeObserverExample,
+        ScrollExample,
+        TextDiffExample,
+      ].map((example) => createExample(example)),
+      createTabbedPage(TextTruncateExample),
+      createExample(WindowEventExample),
+    ],
   },
   {
     name: 'Package',

src-docs/src/views/text_truncate/multi_line.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import { faker } from '@faker-js/faker';
+
+import { EuiPanel, EuiText, EuiTextBlockTruncate } from '../../../../src';
+
+export default () => {
+  return (
+    <EuiText>
+      <EuiPanel
+        css={css`
+          overflow: auto;
+          resize: horizontal; /* Not all browsers support resize logical properties yet */
+          resize: inline;
+          inline-size: 50ch;
+          max-inline-size: 100%;
+        `}
+      >
+        <EuiTextBlockTruncate lines={3}>
+          {faker.lorem.lines(10)}
+        </EuiTextBlockTruncate>
+      </EuiPanel>
+    </EuiText>
+  );
+};