diff --git a/src/composables/useInput.js b/src/composables/useInput.js
index c0d9bb6..0f3b812 100644
--- a/src/composables/useInput.js
+++ b/src/composables/useInput.js
@@ -94,16 +94,6 @@ export function useInput(props, emit) {
             : props.wwElementState.props.readonly;
     });
 
-    const style = computed(() => {
-        const computedStyle = {
-            ...wwLib.wwUtils.getTextStyleFromContent(props.content),
-            '--placeholder-color': props.content.placeholderColor,
-        };
-        delete computedStyle['whiteSpaceCollapse'];
-        delete computedStyle['whiteSpace'];
-        return computedStyle;
-    });
-
     const min = computed(() => {
         if (type.value === 'date') {
             return props.content.minDate;
@@ -281,7 +271,6 @@ export function useInput(props, emit) {
         step,
         inputType,
         isReadonly,
-        style,
         min,
         max,
         stepAttribute,
diff --git a/src/wwElement.vue b/src/wwElement.vue
index 35cb083..860f4fe 100644
--- a/src/wwElement.vue
+++ b/src/wwElement.vue
@@ -9,7 +9,7 @@
                 v-if="showCurrencySymbol"
                 ref="currencySymbolRef"
                 class="currency-symbol"
-                :style="[currencySymbolStyle, { padding: style.padding }]"
+                :style="currencySymbolStyle"
             >
                 {{ currencySymbol }}
             </span>
@@ -113,7 +113,6 @@ export default {
             step,
             inputType,
             isReadonly,
-            style,
             min,
             max,
             stepAttribute,
@@ -504,7 +503,6 @@ export default {
             required: props.content.required,
             autocomplete: props.content.autocomplete ? 'on' : 'off',
             placeholder: wwLib.wwLang.getText(props.content.placeholder),
-            style: style.value,
             min: min.value,
             max: max.value,
             step: stepAttribute.value,
@@ -519,7 +517,7 @@ export default {
             required: props.content.required,
             placeholder: wwLib.wwLang.getText(props.content.placeholder),
             rows: props.content.rows,
-            style: [style.value, { resize: props.content.resize ? '' : 'none' }],
+            style: { resize: props.content.resize ? '' : 'none' },
         }));
 
         const inputClasses = computed(() => ({
@@ -626,7 +624,6 @@ export default {
             step,
             inputType,
             isReadonly,
-            style,
             isEditing,
             min,
             max,
@@ -686,6 +683,9 @@ export default {
     border: none;
     position: relative;
     isolation: isolate;
+    overflow: var(--ww-text-overflow, initial);
+    text-overflow: var(--ww-text-text-overflow, initial);
+    white-space: var(--ww-text-white-space, initial);
 
     &::placeholder {
         color: var(--placeholder-color, #000000ad);
@@ -730,7 +730,18 @@ export default {
 
     &.currency-type {
         background-color: transparent;
+        color: inherit;
+        font: inherit;
+        letter-spacing: inherit;
+        line-height: inherit;
+        text-align: inherit;
+        text-decoration: inherit;
+        text-decoration-color: inherit;
+        text-decoration-style: inherit;
+        text-shadow: inherit;
+        text-transform: inherit;
         width: 100%;
+        word-spacing: inherit;
     }
 }
 </style>
diff --git a/ww-config.js b/ww-config.js
index 5cc1819..fcd8a2b 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -1,8 +1,43 @@
+function getTextSurfaceCss(content) {
+    return [
+        {
+            property: '--ww-text-white-space',
+            value: content._mapValue('_ww-text_nowrap', 'white-space', {
+                trueValue: 'nowrap',
+                falseValue: 'initial',
+            }),
+        },
+        {
+            property: '--ww-text-overflow',
+            value: content._mapValue('_ww-text_nowrap', 'overflow', {
+                trueValue: 'hidden',
+                falseValue: 'initial',
+            }),
+        },
+        {
+            property: '--ww-text-text-overflow',
+            value: content._mapValue('_ww-text_ellipsis', 'text-overflow', {
+                trueValue: 'ellipsis',
+                falseValue: 'initial',
+            }),
+        },
+    ];
+}
+
 export default {
     inherit: {
         type: 'ww-text',
         exclude: ['text'],
     },
+    css({ content }) {
+        const css = getTextSurfaceCss(content);
+
+        if (content.placeholderColor) {
+            css.push({ property: '--placeholder-color', value: content.placeholderColor });
+        }
+
+        return css;
+    },
     editor: {
         label: { en: 'Form Input', fr: 'Entrée de Formulaire' },
         icon: 'text-input',