fix(components): [SelectorField] 修复input文字过长换行的bug

arksjs · May 17, 2023 · 198a334 · 198a334
1 parent 034bc46
commit 198a334
Show file tree

Hide file tree

Showing 4 changed files with 2,038 additions and 1,990 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tantalum-ui-mobile",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "A Mobile UI Components built on Vue 3.x",
   "main": "lib/index.js",
   "module": "es/index.mjs",

diff --git a/packages/ui/src/Input/index.scss b/packages/ui/src/Input/index.scss
@@ -78,6 +78,13 @@
     box-shadow: none;
     resize: none;
 
+    &.ellipsis {
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
     // white-space: nowrap;
     // text-overflow: ellipsis;
     // overflow: hidden;

diff --git a/packages/ui/src/SelectorField/util.ts b/packages/ui/src/SelectorField/util.ts
@@ -5,5 +5,6 @@ export const getClasses = (props: { label?: string; disabled?: boolean }) => [
 
 export const getInputClasses = (label?: string) => [
   'ta-input_input',
+  'ellipsis',
   { placeholder: !label }
 ]