diff --git a/.changeset/message-response-wrap-long-words.md b/.changeset/message-response-wrap-long-words.md
new file mode 100644
index 00000000..3a9f2062
--- /dev/null
+++ b/.changeset/message-response-wrap-long-words.md
@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+Wrap long words in MessageResponse and ReasoningContent instead of clipping them at the message edge
diff --git a/packages/elements/__tests__/message.test.tsx b/packages/elements/__tests__/message.test.tsx
index a6d8a89a..f519d95f 100644
--- a/packages/elements/__tests__/message.test.tsx
+++ b/packages/elements/__tests__/message.test.tsx
@@ -145,6 +145,13 @@ describe("messageResponse", () => {
     render(<MessageResponse># Heading</MessageResponse>);
     expect(screen.getByText("Heading")).toBeInTheDocument();
   });
+
+  it("wraps long words instead of letting them overflow", () => {
+    const { container } = render(
+      <MessageResponse>{"a".repeat(200)}</MessageResponse>
+    );
+    expect(container.firstChild).toHaveClass("break-words");
+  });
 });
 
 describe("messageBranch", () => {
diff --git a/packages/elements/__tests__/reasoning.test.tsx b/packages/elements/__tests__/reasoning.test.tsx
index e874d554..557dca99 100644
--- a/packages/elements/__tests__/reasoning.test.tsx
+++ b/packages/elements/__tests__/reasoning.test.tsx
@@ -248,4 +248,16 @@ describe("reasoningContent", () => {
     );
     expect(container.querySelector(".custom")).toBeInTheDocument();
   });
+
+  it("wraps long words instead of letting them overflow", () => {
+    const longWord = "a".repeat(200);
+    render(
+      <Reasoning defaultOpen>
+        <ReasoningContent>{longWord}</ReasoningContent>
+      </Reasoning>
+    );
+    expect(
+      screen.getByText(longWord).closest(".break-words")
+    ).toBeInTheDocument();
+  });
 });
diff --git a/packages/elements/src/message.tsx b/packages/elements/src/message.tsx
index c04a3993..cf1a7389 100644
--- a/packages/elements/src/message.tsx
+++ b/packages/elements/src/message.tsx
@@ -327,7 +327,7 @@ export const MessageResponse = memo(
   ({ className, ...props }: MessageResponseProps) => (
     <Streamdown
       className={cn(
-        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        "size-full break-words [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
         className
       )}
       plugins={streamdownPlugins}
diff --git a/packages/elements/src/reasoning.tsx b/packages/elements/src/reasoning.tsx
index 4789ee2a..986d28ba 100644
--- a/packages/elements/src/reasoning.tsx
+++ b/packages/elements/src/reasoning.tsx
@@ -210,7 +210,7 @@ export const ReasoningContent = memo(
   ({ className, children, ...props }: ReasoningContentProps) => (
     <CollapsibleContent
       className={cn(
-        "mt-4 text-sm",
+        "mt-4 break-words text-sm",
         "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
         className
       )}