From 958d6084cfbe12516a1e5ab5ec6aff409cb866ca Mon Sep 17 00:00:00 2001
From: Jeff Smith <37851214+eljefe223@users.noreply.github.com>
Date: Wed, 8 Mar 2023 14:40:19 -0800
Subject: [PATCH] fix: [text] block breaks the style attribute (#27129)

* fix: [text] block breaks the style attribute

* chnage files

* addresed comments

* Update packages/web-components/src/text/text.styles.ts

Co-authored-by: Chris Holt <chhol@microsoft.com>

* addressed pr comments

---------

Co-authored-by: Chris Holt <chhol@microsoft.com>
---
 ...eb-components-91a1543a-10b0-4b10-9d32-0535f7a8e631.json | 7 +++++++
 packages/web-components/src/text/text.styles.ts            | 4 +++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 change/@fluentui-web-components-91a1543a-10b0-4b10-9d32-0535f7a8e631.json

diff --git a/change/@fluentui-web-components-91a1543a-10b0-4b10-9d32-0535f7a8e631.json b/change/@fluentui-web-components-91a1543a-10b0-4b10-9d32-0535f7a8e631.json
new file mode 100644
index 0000000000000..e96167ea0483c
--- /dev/null
+++ b/change/@fluentui-web-components-91a1543a-10b0-4b10-9d32-0535f7a8e631.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: [text] block breaks the style attribute",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/text/text.styles.ts b/packages/web-components/src/text/text.styles.ts
index cfe208b822005..232555a9d2e0d 100644
--- a/packages/web-components/src/text/text.styles.ts
+++ b/packages/web-components/src/text/text.styles.ts
@@ -42,12 +42,13 @@ export const styles = css`
     line-height: ${lineHeightBase300};
     font-weight: ${fontWeightRegular};
     text-align: start;
-    display: inline;
     white-space: normal;
     overflow: visible;
     text-overflow: clip;
     margin: 0;
+    display: inline;
   }
+
   :host([nowrap]) ::slotted(*) {
     white-space: nowrap;
     overflow: hidden;
@@ -55,6 +56,7 @@ export const styles = css`
   :host([truncate]) ::slotted(*) {
     text-overflow: ellipsis;
   }
+  :host([block]),
   :host([block]) ::slotted(*) {
     display: block;
   }