> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overflow Text – Code

> The OverflowText component provides row-based text truncation with optional expand/collapse functionality for text content.

export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
  const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
  const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
  const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
  const [isLocalOverride, setIsLocalOverride] = useState(false);
  useEffect(() => {
    const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
    fetch(examplePath, {
      method: "HEAD"
    }).then(r => {
      if (r.ok) setIsLocalOverride(true);
    }).catch(() => {});
  }, [example]);
  const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
  if (screenshotOnly) {
    return <Frame className="flex flex-col">
        <div className="flex dark:hidden" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined,
      background: "#FFFFFF"
    }}>
          <img srcset={`${screenshotBase}/${example}.png, ${screenshotBase}/${example}-2x.png 2x`} src={`${screenshotBase}/${example}.png`} alt={example} noZoom />
        </div>
        <div className="hidden dark:flex" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined,
      background: "#141414"
    }}>
          <img srcset={`${screenshotBase}/${example}-dark.png, ${screenshotBase}/${example}-dark-2x.png 2x`} src={`${screenshotBase}/${example}-dark.png`} alt={example} noZoom />
        </div>
      </Frame>;
  }
  if (screenshot) {
    return <Frame className="flex flex-col -mb-2">
        <div className="flex dark:hidden bg-white dark:bg-codeblock border border-gray-950/10 dark:border-white/10 dark:twoslash-dark rounded-2xl overflow-hidden" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined
    }}>
          <img srcset={`${screenshotBase}/${example}.png, ${screenshotBase}/${example}-2x.png 2x`} src={`${screenshotBase}/${example}.png`} alt={example} noZoom />
        </div>

        <div className="hidden dark:flex bg-white dark:bg-codeblock border border-gray-950/10 dark:border-white/10 dark:twoslash-dark rounded-2xl overflow-hidden" style={{
      background: "#141414",
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined
    }}>
          <img srcset={`${screenshotBase}/${example}-dark.png, ${screenshotBase}/${example}-dark-2x.png 2x`} src={`${screenshotBase}/${example}-dark.png`} alt={example} noZoom />
        </div>

        <div className="flex justify-end items-center text-xs py-2 px-1 gap-4">
          {!showCodeProp ? <button className="inline-flex justify-end items-center text-gray-700 dark:text-gray-50 hover:text-blue-500 dark:hover:text-blue-300 transition-colors group self-end gap-1 cursor-pointer" onClick={() => setShowCodeBlock(!showCodeBlock)} style={{
      appearance: "none"
    }}>
              <Icon icon="code" size="12px" className="group-hover:bg-blue-500 dark:group-hover:bg-blue-300" />
              <span>{showCodeBlock ? "Hide code" : "Show code"}</span>
            </button> : null}

          <a className="inline-flex justify-end items-center hover:text-blue-500 dark:hover:text-blue-300 transition-colors group self-end gap-1" href={`${STACKBLITZ_BASE}/${example}?file=src/App.tsx`} target="_blank" rel="noreferrer">
            <Icon icon="bolt" size="12px" className="group-hover:bg-blue-500 dark:group-hover:bg-blue-300" />
            <span>StackBlitz demo</span>
          </a>
        </div>

        <div className="grid transition-[grid-template-rows] duration-300 ease-in-out overflow-auto overflow-y-hidden overflow-x-auto" style={showCodeBlock ? {
      gridTemplateRows: "1fr"
    } : {
      gridTemplateRows: "0fr"
    }}>
          <div style={{
      minHeight: 0,
      overflowX: "auto",
      overflowY: "hidden",
      marginBlockStart: "-1.25rem",
      marginBlockEnd: "-1.5rem"
    }}>
            {children}
          </div>
        </div>
      </Frame>;
  } else {
    return <div style={{
      display: "flex",
      width: fullWidth ? "100%" : "50%",
      minHeight: customHeight ? customHeight : "316px",
      resize: "vertical",
      overflow: "auto"
    }}>
        <iframe title={example} style={{
      flex: 1,
      width: fullWidth ? "100%" : "50%",
      minHeight: customHeight ? customHeight : "316px"
    }} src={`${STACKBLITZ_BASE}/${example}?embed=1&hideNavigation=1&hideExplorer=1&terminalHeight=0&file=src/App.tsx${clickToLoad ? "&ctl=1" : ""}${hideCodeInLiveCode ? "&view=preview" : ""}`} allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" />
      </div>;
  }
};

<Tabs>
  <Tab title="Implementation">
    ## Live Component Playground

    <LiveCode showCode example="overflowtext-playground" fullWidth screenshot>
      ```tsx lines expandable theme={null}
      import { Flex, OverflowText, Text } from "@servicetitan/anvil2";

      function App() {
        return (
          <Flex style={{ maxWidth: "400px" }}>
            <OverflowText
              rows={2}
              expandable
              expandText="Show more..."
              collapseText="Show less..."
            >
              <Text>
                <strong>Truncation</strong> - Do duis consequat esse consequat eu
                consectetur culpa incididunt magna sit. Laboris ad dolor fugiat anim
                veniam ullamco aliquip eiusmod. Officia pariatur ad sint elit sint eu
                elit fugiat magna voluptate commodo fugiat. Do duis consequat esse
                consequat eu consectetur culpa incididunt magna sit. Laboris ad dolor
                fugiat anim veniam ullamco aliquip eiusmod. Officia pariatur ad sint
                elit sint eu elit fugiat magna voluptate commodo fugiat.
              </Text>
            </OverflowText>
          </Flex>
        );
      }

      export default App;
      ```
    </LiveCode>

    ## Common Examples

    ```tsx theme={null}
    import { Overflow } from "@servicetitan/anvil2";

    function ExampleComponent() {
      return (
        <Overflow.Text rows={1}>
          <Text>{/* Text content */}</Text>
        </Overflow.Text>
      );
    }
    ```

    ### Overflow text

    To handle the overflow of text content, you can use the `Overflow.Text` component. By default, it will limit the text to a single line:

    <LiveCode showCode example="overflowtext-rows-1" screenshot fullWidth>
      ```tsx lines expandable theme={null}
      import { Flex, OverflowText } from "@servicetitan/anvil2";

      function App() {
        return (
          <Flex style={{ maxWidth: "400px" }}>
            <OverflowText>
              <strong>Truncation</strong> - Do duis consequat esse consequat eu
              consectetur culpa incididunt magna sit. Laboris ad dolor fugiat anim
              veniam ullamco aliquip eiusmod. Officia pariatur ad sint elit sint eu
              elit fugiat magna voluptate commodo fugiat. Do duis consequat esse
              consequat eu consectetur culpa incididunt magna sit. Laboris ad dolor
              fugiat anim veniam ullamco aliquip eiusmod. Officia pariatur ad sint
              elit sint eu elit fugiat magna voluptate commodo fugiat.
            </OverflowText>
          </Flex>
        );
      }

      export default App;
      ```
    </LiveCode>

    #### Adjusting rows of overflow text

    You can increase the number of visible rows by setting the `rows` prop:

    <LiveCode showCode example="overflowtext-rows-3" screenshot fullWidth>
      ```tsx lines expandable theme={null}
      import { Flex, OverflowText, Text } from "@servicetitan/anvil2";

      function App() {
        return (
          <Flex style={{ maxWidth: "400px" }}>
            <OverflowText rows={3}>
              <Text>
                <strong>Truncation</strong> - Do duis consequat esse consequat eu
                consectetur culpa incididunt magna sit. Laboris ad dolor fugiat anim
                veniam ullamco aliquip eiusmod. Officia pariatur ad sint elit sint eu
                elit fugiat magna voluptate commodo fugiat. Do duis consequat esse
                consequat eu consectetur culpa incididunt magna sit. Laboris ad dolor
                fugiat anim veniam ullamco aliquip eiusmod. Officia pariatur ad sint
                elit sint eu elit fugiat magna voluptate commodo fugiat.
              </Text>
            </OverflowText>
          </Flex>
        );
      }

      export default App;
      ```
    </LiveCode>

    #### Truncating overflow text

    To display a "Show more..." button on overflow text, you can use the `expandable` prop. For more custom use cases, you can also use the `expandText`/`collapseText` and `onExpand`/`onCollapse` props to customize the displayed text and event handlers:

    <LiveCode showCode example="overflowtext-expandable" screenshot fullWidth>
      ```tsx lines expandable theme={null}
      import { Flex, OverflowText, Text } from "@servicetitan/anvil2";

      function App() {
        return (
          <Flex style={{ maxWidth: "400px" }}>
            <OverflowText rows={3} expandable>
              <Text>
                <strong>Truncation</strong> - Do duis consequat esse consequat eu
                consectetur culpa incididunt magna sit. Laboris ad dolor fugiat anim
                veniam ullamco aliquip eiusmod. Officia pariatur ad sint elit sint eu
                elit fugiat magna voluptate commodo fugiat. Do duis consequat esse
                consequat eu consectetur culpa incididunt magna sit. Laboris ad dolor
                fugiat anim veniam ullamco aliquip eiusmod. Officia pariatur ad sint
                elit sint eu elit fugiat magna voluptate commodo fugiat.
              </Text>
            </OverflowText>
          </Flex>
        );
      }

      export default App;
      ```
    </LiveCode>

    ## React Accessibility

    * The component automatically disables keyboard-focusable elements when they are not visible in the truncated view
    * The expand/collapse button is keyboard accessible
    * Content is properly structured for screen readers
  </Tab>

  <Tab title="OverflowText Props">
    ```tsx theme={null}
    import { Overflow } from "@servicetitan/anvil2";

    function ExampleComponent() {
      return (
        <Overflow.Text
          rows={1}
          expandable={false}
          expandText="Show more..."
          collapseText="Show less..."
        >
          <Text>{/* Text content */}</Text>
        </Overflow.Text>
      );
    }
    ```

    ## `OverflowText` Props

    In addition to the props listed below, the `OverflowText` component can accept any valid HTML `div` props:

    <ParamField path="collapseText" type="string" default="Show less..." />

    <ParamField path="expandable" type="boolean" default="false" />

    <ParamField path="expandText" type="string" default="Show more..." />

    <ParamField path="onCollapse" type="(e: MouseEvent<HTMLButtonElement>) => void" />

    <ParamField path="onExpand" type="(e: MouseEvent<HTMLButtonElement>) => void" />

    <ParamField path="rows" type={`number | "unlimited"`} default="1" />
  </Tab>
</Tabs>