diff --git a/packages/ui-react/src/text/Text.tsx b/packages/ui-react/src/text/Text.tsx
index 0a0557de..9d3f5979 100644
--- a/packages/ui-react/src/text/Text.tsx
+++ b/packages/ui-react/src/text/Text.tsx
@@ -34,9 +34,9 @@ const Text: React.FC<TextProps> = ({ config }) => {
   const [displayText] = useState(config.text);
 
   return (
-    <p ref={ref} className="magic-ui-text" style={app.transformStyle(config.style || {})} id={`${config.id || ''}`}>
+    <div ref={ref} className="magic-ui-text" style={app.transformStyle(config.style || {})} id={`${config.id || ''}`}>
       {displayText}
-    </p>
+    </div>
   );
 };
 
diff --git a/packages/ui-vue2/src/text/Text.vue b/packages/ui-vue2/src/text/Text.vue
index 7d5cb97f..a51d0e12 100644
--- a/packages/ui-vue2/src/text/Text.vue
+++ b/packages/ui-vue2/src/text/Text.vue
@@ -54,9 +54,9 @@ export default defineComponent({
   render() {
     const className = this.config?.multiple ? 'magic-ui-text' : 'magic-ui-text magic-ui-text--single-line';
     if (typeof this.$slots?.default === 'function') {
-      return h('span', { class: className }, [this.$slots?.default?.() || '']);
+      return h('div', { class: className }, [this.$slots?.default?.() || '']);
     }
-    return h('span', {
+    return h('div', {
       class: className,
       domProps: {
         innerHTML: this.displayText,