diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css
index c769c64f403b..454874ff256d 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css
@@ -35,6 +35,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   left: 0;
   padding: 0 var(--ifm-pre-padding);
   background: var(--ifm-pre-background);
+  overflow-wrap: normal;
 }
 
 .codeLineNumber::before {
diff --git a/website/_dogfooding/_pages tests/code-block-tests.mdx b/website/_dogfooding/_pages tests/code-block-tests.mdx
index 44db91d49094..2c955e110cb4 100644
--- a/website/_dogfooding/_pages tests/code-block-tests.mdx	
+++ b/website/_dogfooding/_pages tests/code-block-tests.mdx	
@@ -249,3 +249,21 @@ echo "short_initially_hidden_string"
 </Tabs>
 
 [// spell-checker:enable]: #
+
+```jsx showLineNumbers
+import React from 'react';
+import Layout from '@theme/Layout';
+
+export default function MyReactPage() {
+  return (
+    <Layout>
+      <h1>My React page</h1>
+      <p>
+        This is a React page. Let's make this sentence bit long. Some more words
+        to make sure... Some more words to make sure... Some more words to make
+        sure...
+      </p>
+    </Layout>
+  );
+}
+```