diff --git a/change/@fluentui-react-text-f73e0a50-d72e-4f5b-bcf3-4c500cec695d.json b/change/@fluentui-react-text-f73e0a50-d72e-4f5b-bcf3-4c500cec695d.json
new file mode 100644
index 00000000000000..6ed1e9dd8af892
--- /dev/null
+++ b/change/@fluentui-react-text-f73e0a50-d72e-4f5b-bcf3-4c500cec695d.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update styles to not use CSS shorthands",
+  "packageName": "@fluentui/react-text",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-text/src/components/Text/Text.test.tsx b/packages/react-text/src/components/Text/Text.test.tsx
index 561a2713e42bed..51363b80244022 100644
--- a/packages/react-text/src/components/Text/Text.test.tsx
+++ b/packages/react-text/src/components/Text/Text.test.tsx
@@ -32,7 +32,8 @@ describe('Text', () => {
       display: inline;
       text-align: start;
       white-space: normal;
-      overflow: visible;
+      overflow-x: visible;
+      overflow-y: visible;
       text-overflow: clip;
     `);
   });
@@ -43,7 +44,8 @@ describe('Text', () => {
     const textElement = getByText('Test');
     expect(textElement).toHaveStyle(`
       white-space: nowrap;
-      overflow: hidden;
+      overflow-x: hidden;
+      overflow-y: hidden;
     `);
   });
 
@@ -79,7 +81,7 @@ describe('Text', () => {
 
     const textElement = getByText('Test');
     expect(textElement).toHaveStyle(`
-      text-decoration: underline;
+      text-decoration-line: underline;
     `);
   });
 
@@ -88,7 +90,7 @@ describe('Text', () => {
 
     const textElement = getByText('Test');
     expect(textElement).toHaveStyle(`
-      text-decoration: line-through;
+      text-decoration-line: line-through;
     `);
   });
 
@@ -101,7 +103,7 @@ describe('Text', () => {
 
     const textElement = getByText('Test');
     expect(textElement).toHaveStyle(`
-      text-decoration: line-through underline;
+      text-decoration-line: line-through underline;
     `);
   });
 
diff --git a/packages/react-text/src/components/Text/useTextStyles.ts b/packages/react-text/src/components/Text/useTextStyles.ts
index 52ce13ff4fee38..9bb1c5d91d28ee 100644
--- a/packages/react-text/src/components/Text/useTextStyles.ts
+++ b/packages/react-text/src/components/Text/useTextStyles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
+import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-make-styles';
 import type { TextState } from './Text.types';
 
 export const textClassName = 'fui-Text';
@@ -15,12 +15,12 @@ const useStyles = makeStyles({
     textAlign: 'start',
     display: 'inline',
     whiteSpace: 'normal',
-    overflow: 'visible',
+    ...shorthands.overflow('visible'),
     textOverflow: 'clip',
   }),
   nowrap: {
     whiteSpace: 'nowrap',
-    overflow: 'hidden',
+    ...shorthands.overflow('hidden'),
   },
   truncate: {
     textOverflow: 'ellipsis',
@@ -32,13 +32,13 @@ const useStyles = makeStyles({
     fontStyle: 'italic',
   },
   underline: {
-    textDecoration: 'underline',
+    textDecorationLine: 'underline',
   },
   strikethrough: {
-    textDecoration: 'line-through',
+    textDecorationLine: 'line-through',
   },
   strikethroughUnderline: {
-    textDecoration: 'line-through underline',
+    textDecorationLine: 'line-through underline',
   },
   base100: theme => ({
     fontSize: theme.fontSizeBase100,
diff --git a/packages/react-text/src/stories/Default.stories.tsx b/packages/react-text/src/stories/Default.stories.tsx
index e7c73267e36d9d..462807fab5c071 100644
--- a/packages/react-text/src/stories/Default.stories.tsx
+++ b/packages/react-text/src/stories/Default.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
-import { Text } from '../Text'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
-import type { TextProps } from '../Text'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../Text';
+import type { TextProps } from '../Text';
 
 const useStyles = makeStyles({
   container: {
diff --git a/packages/react-text/src/stories/TextFont.stories.tsx b/packages/react-text/src/stories/TextFont.stories.tsx
index f3a1f79ed448b2..2f7bebb1feaaa9 100644
--- a/packages/react-text/src/stories/TextFont.stories.tsx
+++ b/packages/react-text/src/stories/TextFont.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const Font = () => (
   <div style={{ display: 'flex', gap: 20 }}>
diff --git a/packages/react-text/src/stories/TextItalic.stories.tsx b/packages/react-text/src/stories/TextItalic.stories.tsx
index b715de77668084..a7a4bce517bc07 100644
--- a/packages/react-text/src/stories/TextItalic.stories.tsx
+++ b/packages/react-text/src/stories/TextItalic.stories.tsx
@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const Italic = () => <Text italic>Italic text</Text>;
diff --git a/packages/react-text/src/stories/TextSize.stories.tsx b/packages/react-text/src/stories/TextSize.stories.tsx
index 090fdead6d5c7d..a87e730bf56a4c 100644
--- a/packages/react-text/src/stories/TextSize.stories.tsx
+++ b/packages/react-text/src/stories/TextSize.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const Size = () => (
   <div style={{ display: 'flex', gap: 10, alignItems: 'baseline' }}>
diff --git a/packages/react-text/src/stories/TextStrikeThrough.stories.tsx b/packages/react-text/src/stories/TextStrikeThrough.stories.tsx
index 0e1d01a954b9c1..70e863b68fe0ae 100644
--- a/packages/react-text/src/stories/TextStrikeThrough.stories.tsx
+++ b/packages/react-text/src/stories/TextStrikeThrough.stories.tsx
@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const StrikeThrough = () => <Text strikethrough>Strikethrough text</Text>;
diff --git a/packages/react-text/src/stories/TextTruncate.stories.tsx b/packages/react-text/src/stories/TextTruncate.stories.tsx
index 00cdacee8f22a0..d66efe31f3f759 100644
--- a/packages/react-text/src/stories/TextTruncate.stories.tsx
+++ b/packages/react-text/src/stories/TextTruncate.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const Truncate = () => (
   <Text truncate style={{ width: 100, overflow: 'hidden', whiteSpace: 'nowrap' }} block>
diff --git a/packages/react-text/src/stories/TextTypography.stories.tsx b/packages/react-text/src/stories/TextTypography.stories.tsx
index cec3978fec64ed..6b314a65c532ee 100644
--- a/packages/react-text/src/stories/TextTypography.stories.tsx
+++ b/packages/react-text/src/stories/TextTypography.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Body, Caption, Display, Headline, LargeTitle, Title1, Title2, Title3, Subheadline } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Body, Caption, Display, Headline, LargeTitle, Title1, Title2, Title3, Subheadline } from '../index';
 
 export const Typography = () => (
   <>
diff --git a/packages/react-text/src/stories/TextUnderline.stories.tsx b/packages/react-text/src/stories/TextUnderline.stories.tsx
index 77b16637c557d3..78510ff05b0324 100644
--- a/packages/react-text/src/stories/TextUnderline.stories.tsx
+++ b/packages/react-text/src/stories/TextUnderline.stories.tsx
@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const Underline = () => <Text underline>Underlined text</Text>;
diff --git a/packages/react-text/src/stories/TextWeight.stories.tsx b/packages/react-text/src/stories/TextWeight.stories.tsx
index ef0bdfaf3c6539..752fa1af315d7f 100644
--- a/packages/react-text/src/stories/TextWeight.stories.tsx
+++ b/packages/react-text/src/stories/TextWeight.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const Weight = () => (
   <div style={{ display: 'flex', gap: 20 }}>