fix(input): [input] fix textarea word wrap style

Author: gimmyhehe

examples/sites/demos/mobile-first/app/input/display-only-popup-more.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="demo-input">
+    <tiny-input type="textarea" v-model="input" display-only popup-more></tiny-input>
+  </div>
+</template>
+
+<script>
+import { TinyInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput
+  },
+  data() {
+    return {
+      input:
+        '表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏。\n表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏。\n表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏。\n表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏。\n表单文本域开启只读模式，\n文本内容超过 5 行自动隐藏'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input .tiny-textarea {
+  width: 260px;
+}
+</style>

examples/sites/demos/mobile-first/app/input/webdoc/input.js

@@ -508,6 +508,20 @@ export default {
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['display-only-content.vue']
+    },
+    {
+      demoId: 'display-only-popup-more',
+      name: {
+        'zh-CN': '文本域只读超出显示更多按钮',
+        'en-US': 'Text field read-only beyond Show more button'
+      },
+      desc: {
+        'zh-CN':
+          '在只读的基础上增加<code>popup-more</code>属性，可使文本域超出显示更多按钮，点击更多按钮可以查看详细信息。',
+        'en-US':
+          'The <code>popup-more</code> attribute is added to enable the text field to exceed the display of more buttons. You can click more buttons to view details.'
+      },
+      codeFiles: ['display-only-popup-more.vue']
     }
   ]
 }

packages/vue/src/input/src/mobile-first.vue

@@ -314,7 +314,7 @@
         :close-on-click-modal="false"
         @update:visible="state.showDisplayOnlyBox = $event"
       >
-        <div>{{ state.displayOnlyText }}</div>
+        <pre class="font-[inherit]">{{ state.displayOnlyText }}</pre>
         <template #footer>
           <tiny-button @click="state.showDisplayOnlyBox = false">{{ t('ui.input.close') }}</tiny-button>
         </template>