diff --git a/packages/styleguide/src/lib/Typography/Anchor/Anchor.mdx b/packages/styleguide/src/lib/Typography/Anchor/Anchor.mdx
index 9ab4dff4c49..55681bd1875 100644
--- a/packages/styleguide/src/lib/Typography/Anchor/Anchor.mdx
+++ b/packages/styleguide/src/lib/Typography/Anchor/Anchor.mdx
@@ -27,6 +27,9 @@ export const parameters = {
 
 <ComponentHeader {...parameters} />
 
+<Canvas of={AnchorStories.TruncateWithToolTipExample} />
+<Canvas of={AnchorStories.TruncateWithNoToolTipExample} />
+
 ## Usage
 
 Use an anchor to navigate to another page, resource, or location on the same page.
diff --git a/packages/styleguide/src/lib/Typography/Anchor/Anchor.stories.tsx b/packages/styleguide/src/lib/Typography/Anchor/Anchor.stories.tsx
index d9b2703ac0b..41da65c6db5 100644
--- a/packages/styleguide/src/lib/Typography/Anchor/Anchor.stories.tsx
+++ b/packages/styleguide/src/lib/Typography/Anchor/Anchor.stories.tsx
@@ -1,9 +1,10 @@
-import { Anchor, GridBox, Text } from '@codecademy/gamut';
+import { Anchor, Box, GridBox, Text, ToolTip } from '@codecademy/gamut';
 import {
   MiniArrowRightIcon,
   MiniInfoOutlineIcon,
 } from '@codecademy/gamut-icons';
 import type { Meta, StoryObj } from '@storybook/react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { PolymorphicAnchors, VariantsExample } from './Anchor.examples';
 
@@ -85,3 +86,79 @@ export const IconModes: Story = {
 export const PolymorphicAnchor: Story = {
   render: () => <PolymorphicAnchors />,
 };
+
+export const TruncateWithTooltip: React.FC<{
+  text: string;
+  toolTipString: string;
+}> = ({ text, toolTipString }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [adjustedText, setAdjustedText] = useState(text);
+
+  const calculateMaxText = (containerWidth: number) => {
+    // Assuming an average character width of 8px, adjust as necessary
+    const averageCharWidth = 8;
+    const maxChars = Math.floor(containerWidth / averageCharWidth);
+    return maxChars;
+  };
+
+  const [shouldTruncate, setShouldTruncate] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (containerRef.current) {
+        const { width } = containerRef.current.getBoundingClientRect();
+        const maxTextLength = calculateMaxText(width);
+        const isTruncated = maxTextLength < text.length;
+        if (isTruncated) {
+          // Adjust the text to fit within the max length
+          const truncatedText = text.slice(0, maxTextLength) + '...';
+          setAdjustedText(truncatedText);
+        } else {
+          setAdjustedText(text);
+        }
+        setShouldTruncate(isTruncated);
+      }
+    };
+    handleResize(); // Initial check
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+
+  const anchor = (
+    <Anchor href="/" variant="inline">
+      {adjustedText}
+    </Anchor>
+  );
+
+  return (
+    <Box ref={containerRef} width={{ _: 300, xs: 450, sm: 600, md: 800 }}>
+      {shouldTruncate ? (
+        <ToolTip info={toolTipString} placement="floating">
+          {anchor}
+        </ToolTip>
+      ) : (
+        anchor
+      )}
+    </Box>
+  );
+};
+
+export const TruncateWithToolTipExample: Story = {
+  render: () => (
+    <TruncateWithTooltip
+      text="This is a looooooong text that will be truncated after one line. Hover to see the tooltip. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+      toolTipString="Example tooltip"
+    />
+  ),
+};
+
+export const TruncateWithNoToolTipExample: Story = {
+  render: () => (
+    <TruncateWithTooltip
+      text="Maybe a toolTip depending on the screen size. Just a chance? maybe?"
+      toolTipString="In case this truncates"
+    />
+  ),
+};